Jquery Ui拖放問題

我正在開發一個帶有jQuery和jQuery UI拖放功能的單個工具欄插件。這個想法如下：我有一個列表（ul）和項目（li），其中每個代表像文本，幾何圖形等工具。當我拖動一個工具，然後將其放在主角上時，必須創建一個「小工具」。問題出在工具掉到容器上後，它不再可以通過拖放操作。拖放功能只需一次。Jquery Ui拖放問題

希望你能幫助我。對不起我的英語不好。

這裏是代碼

插件

(function($){ 

//Attach this new method to jQuery 
$.fn.extend({ 

    //This is where you write your plugin's name 
    spkToolbar: function(options) { 

     //Set the default values, use comma to separate the settings, example: 
     var defaults = { 
      isDraggable:false 
      ,droppableDiv:undefined 
     }; 

     var options = $.extend(defaults, options); 
     //Iterate over the current set of matched elements 
     return this.each(function() { 
      var o = options; 
      $(this).addClass('toolbar'); 
      if(o.isDraggable) 
       $('.toolbar').draggable(); 
      $(this).addClass('spkToolbar'); 

      var obj = $(this);    

      //Get all LI in the UL 
      var items = $("ul li", obj); 
      items.draggable({ appendTo: "body",helper: 'clone' }); 
      if(o.droppableDiv!=undefined){ 
       $(o.droppableDiv).droppable({ 
        drop: function(event, ui) { 
         // some extra code for proper widget creation 
        } 
       }); 
      } 
     }); 
    } 
}); 
})(jQuery);

的HTML

<div id="toolbar"> 
    <ul> 
     <li id="save" title="Guardar cambios"><img src="<c:url value="images/toolbar/save.png" />" /></li> 
    </ul> 
</div>

用法：

jQuery('#toolbar').spkToolbar({droppableDiv:'#new-dropcontainer'});

我幾乎忘了，使用jQuery 1.5和jQuery UI 1.8.1

在此先感謝

來源

2011-03-18 KalEl98

你應該clone()可拖動對象。

或更好，但使用helper clone選項

$(".selector").draggable({ helper: 'clone' });

來源

2011-03-18 02:19:10 Mottie

嗨！是的，我在這裏做了：var items = $（「ul li」，obj）; items.draggable（{appendTo：「body」，helper：'clone'}）; – KalEl98 2011-03-18 02:29:16

是的，對不起，我在工具欄上看到了'draggable（）'，而不是另一個LOL ......無論如何，請查看購物車演示，瞭解他們如何「放棄」該項目：http://jqueryui.com/demos/ droppable /＃購物車 – Mottie 2011-03-18 02:34:21

爲什麼不只是部分地淡出點擊圖標，克隆它，並開始克隆元素拖累&下降？

來源

2011-03-18 02:20:31 mattsven

可能是一個有效的選項 – KalEl98 2011-03-18 02:30:50

這是你的代碼的工作版本： http://jsfiddle.net/marcosfromero/YRfVd/

我加入這個HTML：

<div id="new-dropcontainer"> 
    <ul> 
    </ul> 
</div>

與此相關聯的JavaScript：

 if(o.droppableDiv!=undefined){ 
      $(o.droppableDiv).droppable({ 
       drop: function(event, ui) { 
        // clone the original draggable, not the ui.helper 
        // and append it to the ul element inside new-dropcontainer 
        jQuery('#new-dropcontainer ul').append(ui.draggable.clone()); 
        // some extra code for proper widget creation 
       } 
      }); 
     }

來源

2011-03-18 02:53:18 marcosfromero

非常非常有用！ – KalEl98 2011-03-18 13:03:27

@ KalEl98：歡迎接受:) – marcosfromero 2011-03-18 17:54:39

以防萬一，從來就改變jquery的版本從1.5到1.4.1，它的工作。我不知道爲什麼..所有

來源

2011-03-23 15:12:54 KalEl98

我所面臨的阻力

感謝拖放項目的定位問題。當我試着拖放一個項目，而不是該項目得到追加它總是在定位top.this是我爲此得到的靈魂。希望它是有幫助的。

$(".zone1, .zone2").sortable({ 
      connectWith: ".test", 
      cursor: 'pointer', 
      over: function (event, ui) { 
         ui.placeholder.appendTo(ui.placeholder.parent()); 
       } 
      } 
     }).disableSelection();

來源

2013-08-29 09:17:09

Jquery Ui拖放問題

回答

相關問題