jQuery UI可拖拽和放置，還原和接受元素

我一直在試驗這個代碼：jsfiddle它強調並讓你知道哪些方框可以放在盒子上，但它不接受任何放置物品。有誰知道我可以如何改變這個代碼來接受droppable而不是它只是回覆？jQuery UI可拖拽和放置，還原和接受元素

$(".DragItem").draggable({ 
    revert: true, 
    helper: "clone" 
}); 

$(".DropItem").droppable({ 
    tolerance: "touch", 
    over: function (event, ui) { 
     var dropItem = $(this); 
     var dragItem = $(ui.draggable); 
     var valid = String(dropItem.data("id")).indexOf(dragItem.data("id")) > -1; 
     if (valid) { 
      dropItem.addClass("DropTargetValid"); 
     } else { 
      dropItem.addClass("DropTargetInvalid"); 
     } 
    }, 
    out: function (event, ui) { 
     var dropItem = $(this); 
     dropItem.removeClass("DropTargetValid"); 
     dropItem.removeClass("DropTargetInvalid"); 
    }, 
    deactivate: function (event, ui) { 
     var dropItem = $(this); 
     dropItem.removeClass("DropTargetValid"); 
     dropItem.removeClass("DropTargetInvalid"); 
    } 
});

來源

2013-07-22 user2607442

你在哪裏定義了一個下降發生了什麼？ – Ian

我認爲我們在這裏缺少一些代碼？ – Alicia

您將需要克隆（）追加到正確的div並恢復他們，如果他們不匹配，首先accept:所有dragable元素，然後處理回覆在drop:部分。您還需要創建並保存您克隆和拖放的原始位置，以便您可以將其恢復到其原始位置，然後將其從頁面中刪除。

這裏是finall腳本演示：

JSnippet demo draggable & droppable

有樂趣！

來源

2013-07-22 21:35:09

謝謝，這就像一個魅力！ – user2607442

我就從這樣的開始：

再使用內置的查詢UI功能，例如「accept」或「activeClass」可丟棄參數
如果容器數量較少 - 您可以單獨聲明「可丟棄」並使用「接受」只允許某些類別的可拖動（如下面的演示）
試圖「剽竊」可拖拽&可能但不是很容易，特別是對於複雜元素（如果可拖動和可拖拽的HTML結構比平面div更復雜）

樣品：

$(".drop1").droppable({ 
    accept: '.drag1', 
    activeClass: 'DropTargetValid', 
    drop: function (ev, ui) { 
     $(ev.target).append(ui.draggable.clone()); 
    } 
});

Fiddle demo

---編輯---

Updated demo

來源

2013-07-22 16:35:00 tborychowski

我已經使用接受，問題是所有的盒子都接受所有的可拖動的，因爲類是所有可用的，但唯一分離可拖動的是一個唯一的ID號碼，我不知道如何使用，所以所有的可拖動對象都不會被所有的可拖放對象接受。 – user2607442

@ user2607442請參閱我的更新後的帖子和演示（http://jsfiddle.net/vm9DS/14） – tborychowski

感謝您的快速回復。 tborychowski你的演示工作正常，但我仍然希望不能droppable的框仍然突出顯示紅色，你的演示沒有這樣做。 – user2607442

jQuery UI可拖拽和放置，還原和接受元素

回答

相關問題