Question

我有一个关于我在这个小提琴上工作的例子：jsfiddle

正在发生的事情是，如果丢弃在垃圾箱中，左侧列表中的可拖动将被删除。但我希望在移动到垃圾桶时移除放置在droppable中的物品。我不知道它是否因为它的排序我有这么多麻烦，但任何见解都会很棒。

HTML：

<div class="row">
<div class="escalation_device_select col-xs-4" id="catalog">
    <!-- <select multiple="multiple" style="display"> -->
        <h1 class="ui-widget-header"> Alert Devices</h1>

    <ul>
        <li name="<?php echo 'next_level'.$random; ?>" data-id="-1">Default Top Option</li>
        <li class="" style="border: 1px solid #999999;" name="<?php echo 'id_select'.$random; ?>" data-id="<?php echo $alert_device_id;?>">OPTION</li>
        <li class="" style="border: 1px solid #999999;" name="<?php echo 'id_select'.$random; ?>" data-id="<?php echo $alert_device_id;?>">OPTION2</li>
        <li class="" style="border: 1px solid #999999;" name="<?php echo 'id_select'.$random; ?>" data-id="<?php echo $alert_device_id;?>">OPTION3</li>
    </ul>
</div>
<div id="cart" class="col-xs-6">
        <h3 class="ui-widget-header">Build List Below</h3>

    <div class="ui-widget-content" id="catalog2">
        <ol id="sortable1">
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
    <div>
        <button type="button" class="btn btn-success mybutton" onclick="submit_es(<?php echo $tab_id;?>)">Save</button>
    </div>
    <div id="trash" class="col-xs-2">Trash Bin</div>
</div>

Javascript / Jquery

$(function () {
$("#catalog li").draggable({
    appendTo: "body",
    helper: "clone"
});
$("#cart ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        var alert_id = ($(ui.draggable).attr('data-id'));
        var li_name = Math.random();
        $("<li class=moved name=id_select" + li_name + " data-id=" + alert_id + "></li>").text(ui.draggable.text()).appendTo(this);
        $(this).find(".placeholder").remove();
    }
}).sortable({
    items: "li:not(.placeholder)",
    sort: function () {
        $(this).removeClass("ui-state-default");
    }
})

}）;

$(function () {

$(".moved").draggable();
$('#trash').droppable({
    drop: function (event, ui) {
        $(ui.draggable).remove();
    }
});

}）;

jquery制作可拆卸的可拆卸

0 个答案: