如何使用jquery将元素拖动到特定位置？

Question

jquery 代码

 $("#products li").draggable({
    appendTo: "body",
    helper: "clone"
});
$(".shoppingCart ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        var self = $(this);
        self.find(".placeholder").remove();
        var productid = ui.draggable.attr("data-id");
        if (self.find("[data-id=" + productid + "]").length) return;
        $("<li></li>", {
            "text": ui.draggable.text(),
            "data-id": productid
        }).appendTo(this);
        // To remove item from other shopping chart do this
        var cartid = self.closest('.shoppingCart').attr('id');
        $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
    }
}).sortable({
    items: "li:not(.placeholder)",
    sort: function() {
        $(this).removeClass("ui-state-default");
    }
});

这是html代码

<div id="products">
    <h1 class="ui-widget-header">Blocks</h1>
    <div class="ui-widget-content">
        <ul>
            <li data-id="1"> 10000$ </li>
            <li data-id="2"> -10000$ </li>
            <li data-id="3"> 10000$ </li>
            <li data-id="4"> -10000$ </li>
            <li data-id="5"> Bank </li>
            <li data-id="6"> Loan </li>
        </ul>
    </div>
</div>

<div id="shoppingCart1" class="shoppingCart">
    <h1 class="ui-widget-header">Cresit Side</h1>
    <div class="ui-widget-content">
        <ol>
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
</div>
<div id="shoppingCart2" class="shoppingCart">
    <h1 class="ui-widget-header">Debit side</h1>
    <div class="ui-widget-content">
        <ol>
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
</div>

现在我想知道如何将任何元素放入特定容器中，例如贷方和借方。

我的演示在这里http://jsfiddle.net/Sanjayrathod/S4QgX/541/

现在我想拖放前三个元素仅在贷方，其余元素在借方。

那么我该怎么做。 请帮忙。

Answer 1

在可放置区域的接受参数中添加特定的类名。 在可拖动元素中添加类贷方或借方。

$("#shoppingCart1 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept:".credit",  //for credit
    drop: function(event, ui) {


$("#shoppingCart2 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept:".debit",  //for credit
    drop: function(event, ui) {

DEMO Here.

Answer 2

如果您想限制将元素放置到特定容器，请使用目标可放置对象的“接受”选项：http://jqueryui.com/droppable/#accepted-elements。

它确定可以通过选择器删除的元素，例如

 $( "#droppable" ).droppable({
      accept: "#canBeDroppedId",
      ...
 });