Java scriptte drag drop

MubabasH · 2015-02-23T11:03:48.0000000+03:00

Merhaba arkadaşlar internet sitemiz için yeni bir uygulama hazırlıyoruz ve yardıma ihtiyacımız olan kısımlar var şöyle ki : -Sayfa 2 kısımdan oluşmakta solda drop-down bir menu ve sağda boş büyücek bir div oldugunu düşünelim. -Soldaki drop-down menüsünde açılan elementleri ,sağdaki boş alana drop yapmak istiyoruz ancak şartımız şu soldan sürükledigimiz element , soldaki yerini koruyacak yani ; soldan sağa sürüklediğimiz zaman aslında move değilde copy yapmak istiyoruz umarım anlatabilmişimdir. Bunu nasıl bir kodla yaparız yardımcı olabilecek arkadaşlara şimdiden teşekkürler.

Sıcak Fırsatlarda Tıklananlar

Editörün Seçtiği Fırsatlar

Daha Fazla

Bu Konudaki Kullanıcılar: Daha Az

3 Misafir - 3 Masaüstü

5 sn

4
Cevap

0
Favori

701
Tıklama

Daha Fazla
İstatistik

Konu İstatistikleri Yükleniyor

Konuya Özel

Öne Çıkar

0 oy

Cevapla

Sayfa: 1

Giriş

Mesaj

_____________________________

Çoğu Zaman Hız Bütün Problemleri Çözer.

Selamlar MubabasH,

Umarim asagidaki kod sana baslangic icin yardimci olur. Lutfen dene

index.html dosyasi:

<!DOCTYPE html> 
  <html> 
       
      <head> 
          <meta charset="utf-8"> 
        
          <title>demo</title> 
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
          <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
           
          <link rel="stylesheet" href="main.css"> 
      </head> 
      <body> 
           
  <ul id="left-pane"> 
     <li><img src="https://cdn2.iconfinder.com/data/icons/seo-web-optimization-ultimate-part1/512/cloud-128.png" /></li> 
     <li><img src="https://cdn2.iconfinder.com/data/icons/cloud-computing-1/512/clouds-128.png" /></li> 
     <li><img src="https://cdn2.iconfinder.com/data/icons/color-svg-cloud-icons/512/cloud_service-128.png" /></li> 
  </ul> 
   
  <ul id="right-pane"> 
  </ul> 
          <script src="code.js"></script> 
      </body> 
  </html>

main.css

#left-pane 
  { 
      border: 1px solid black; 
      min-width: 100px; 
      min-height: 100px; 
  } 
   
  #right-pane 
  { 
      border: 1px solid black; 
      min-width: 100px; 
      min-height: 100px; 
  }

code.js

$("#left-pane li").draggable({ 
      containment: '#gbox', 
      cursor: 'move', 
      helper: 'clone', 
      scroll: false, 
      connectToSortable: '#right-pane', 
      appendTo: '#right-pane', 
      start: function () {}, 
      stop: function (event, ui) {} 
  }).mousedown(function () {}); 
   
  $("#right-pane").sortable({ 
      sort: function () {}, 
      placeholder: 'ui-state-highlight', 
      receive: function () {}, 
      update: function (event, ui) {} 
  }); 
   
  $("#right-pane li").live('dblclick', function () { 
      $(this).remove(); 
  }) 
   
  $("#right-pane").droppable({ 
      accept: "#left-pane li", 
      accept: ":not(.ui-sortable-helper)", 
      drop: function (event, ui) { 
          if ($(ui.draggable).find('.single-item').length == 0) 
          { 
          	$(ui.draggable).append("<div class='single-item'></div>"); 
          } 
      } 
  }); 
   
  $("#left-pane").droppable({ 
      accept: "#right-pane li", 
      drop: function (event, ui) {} 
  }); 
   
  $("ul, li").disableSelection();