Java scriptte drag drop

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme Java Java scriptte drag drop

Bu konudaki kullanıcılar: 1 misafir

3
Cevap 641
Tıklama 0
Öne Çıkarma

1. sayfa

Java scriptte drag drop

Cevap Yaz

MubabasH

11 yıl (193 mesaj)

Teğmen

Konu Sahibi

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.

dbd

11 yıl (134 mesaj)

Teğmen

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

Bu mesaja 1 cevap geldi.

MubabasH

11 yıl (193 mesaj)

Teğmen

Konu Sahibi

Size pm den bir kaç şey sormam mümkün mü acaba ?

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @dbd

dbd

11 yıl (134 mesaj)

Teğmen

tabiki

Cevap Yaz

1. sayfa

Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme Java Java scriptte drag drop