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

Palmolive Men Sport 3'i 1 Arada Canlandırıcı Erkek Duş Jeli 500 ml : Amazon.com.tr: Kişisel Bakım ve Kozmetik https://www.amazon.com.tr/dp/B086GGK33T 2 yıl önce paylaşıldı

Hacı Şakir Doğal Geleneksel Beyaz Sabun (4 Adet) : Amazon.com.tr: Kişisel Bakım ve Kozmetik https://www.amazon.com.tr/dp/B086GNDQB4 3 yıl önce paylaşıldı

NIVEA Soft Krem 75 ml, Nemlendirici Bakım Kremi, Yüz, Vücut, El, Jojoba Yağı ve E Vitamini ile Cilt Bakımı, Anında Emilen Hafif Formül, Tüm Ciltler için : Amazon.com.tr: Kişisel Bakım ve Kozmetik https://www.amazon.com.tr/dp/B07L7PTFHK geçen yıl paylaşıldı

Daha Fazla

Bu Konudaki Kullanıcılar: Daha Az

2 Misafir - 2 Masaüstü

5 sn

4
Cevap

0
Favori

545
Tıklama

Daha Fazla
İstatistik

Konu İstatistikleri Yükleniyor

Konuya Özel

0 oy

Öne Çıkar

Cevapla

Sayfa: 1

Giriş

Mesaj

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();