（jQuery的） - 點擊拖動圖像，但不刪除原有

Question

我有點創建的地圖編輯器，我希望能夠點擊從側邊欄的可用圖像上出現光標下並遵循鼠標圖標，所以基本上拖動圖像，但我希望原始圖像保持放置。

我怎麼會在jQuery的（最好）實現這一目標？

Answer 1

試試這一個使用jQuery UI：

HTML：

<ul> 
    <li id="draggable" class="ui-state-highlight">Your Image</li> 
</ul> 

<ul id="sortable"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul>​ 

腳本：

$(function() { 
    $("#sortable").sortable({ 
     revert: true 
    }); 
    $("#draggable").draggable({ 
     connectToSortable: "#sortable", 
     helper: "clone", 
     revert: "invalid" 
    }); 
    $("ul, li").disableSelection(); 
});​ 

在這裏，我也創建小提琴http://jsfiddle.net/aanred/b3QFN/。您也可以閱讀這裏的文檔http://jqueryui.com/draggable/。

Answer 2

我認爲，jQuery UI的draggable對象將幫助您

Answer 3

，這裏是我的解決方案，在這個例子中，我拖着一個div，但你可以很容易地檢查一個IMG的孩子，這個代碼防止被丟棄多個項目（通過取出條件方便地進行修改），有一個可選的回調參數，這樣就可以與對象剛把做一些事情（比如從rel屬性讀等）

refreshDragDrop = function(dragClassName,dropDivId, callback) { 
    $("." + dragClassName).draggable({ 
    connectToSortable: "#" + dropDivId, 
    helper: "clone", 
    revert: "invalid" 
    }); 
    $("#" + dropDivId).droppable({ 
    accept: '.' + dragClassName, 
    drop: function (event, ui) { 
     var $this = $(this), 
     maxItemsCount = 1; 
     if ($this.children('div').length == maxItemsCount){ 
     //too many items,just replace 
     $(this).html($(ui.draggable).clone()); 
     } else { 
     $(this).append($(ui.draggable).clone()); 
     } 
     if (typeof callback == "function") callback($this.children('div')); 
    } 
    }); 
}