使用jquery進行拖放，拖動按鈕和div div

我想用jQuery實現一個解決方案，其中按鈕可以拖動到某個div元素。當它被放入該div時，它應該有自定義的html。使用jquery進行拖放，拖動按鈕和div div

我發現了一個在jsfiddle上的例子，但不幸的是，它沒有提供鏈接到jsfiddle。我在這裏粘貼所有代碼：

HTML

<ul id="left-pane"> 
    <li><img src="https://www.google.com/images/srpr/logo3w.png" /></li> 
    <li><img src="https://www.google.com/images/srpr/logo3w.png" /></li> 
    <li><img src="https://www.google.com/images/srpr/logo3w.png" /></li> 
</ul> 

<ul id="right-pane"> 
</ul>

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; 
}

的JavaScript/jQuery的

$("#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'><input type='text' class='item-title' /><br /><textarea class='item-text'></textarea></div>"); 
     } 
    } 
}); 

$("#left-pane").droppable({ 
    accept: "#right-pane li", 
    drop: function (event, ui) {} 
}); 

$("ul, li").disableSelection();

我想類似上面的東西，但我想改變圖像到一個特定的按鈕，而不是UI元素，可以將其更改爲正常的div？

任何人都可以玩這個小提琴，並提供一個簡單的拖放解決方案嗎？

在此先感謝。

來源

2013-06-20 SachinKRaj

您可以鏈接只要您發佈的代碼太 – Pete

@pete搗鼓：謝謝，它工作。我只是自己找到解決方案，並添加相同的答案。我希望它也可以幫助其他編碼員。 – SachinKRaj

我想，我已經通過玩上面的代碼找到了解決方案。我做錯了按鈕，因爲按鈕已經點擊事件映射，這就是爲什麼當我試圖拖動按鈕時，它不適用於拖動事件。我只是嘗試添加div元素，它顯示像按鈕（用CSS樣式），它的工作方式我想要的。

我唯一需要改變的就是在HTML代碼：

<ul id="left-pane"> 
    <li><div align="center" style="width:100px;border:3px solid #ddd; padding:5px;cursor:move;background:#eee;">Drag Me</div> 
</ul> 

<ul id="right-pane"> 
</ul>

下面是最終解決方案，我一直在尋找：http://jsfiddle.net/Y7RmR/77/

來源

2013-06-20 16:25:12 SachinKRaj

使用jquery進行拖放，拖動按鈕和div div

回答

相關問題