Question

我有一个视图，显示预订和表格为div。这些表是可拖动的，并且可以放置，只有可以拖动的预订。我想将一张桌子拖到你想要的位置，然后在上面拖一个预约。当预订被删除时，桌子不再需要可拖动。这是我现在的代码：

<script>
$(".draggable").draggable({
    snap: ".draggable",
    snapMode: "outer",
    stop: function (event, ui) {
        var finalxPos = $(this).css("left").replace("px", "");
        var finalyPos = $(this).css("top").replace("px", "");
        var itemId = $(this).attr('id');
        var posXid = "posX" + itemId;
        var posYid = "posY" + itemId;
        $('input:text[id="' + posXid + '"]').attr("value", finalxPos);
        $('input:text[id="' + posYid + '"]').attr("value", finalyPos);
        },
}).droppable({
    drop: function(event, ui) {
        $(this).draggable({ disabled: true });
    },
    out: function(ev, ui) {
        $(this).draggable({ disabled: false });
    }
});

    $(".draggableres").draggable({
        snap: ".draggable",
        snapMode: "inner"
    });
</script>

和我的观点：

<div id="tablewrapper">
   <div class="draggableres reservation">reservation 1</div>

   <div class="draggable table ui-widget-content">
   </div>
</div>

当我现在运行它并且我放弃预订时，预订停止可拖动而不是桌子。这是一个循环，所以

$(".draggable").draggable({disabled: true});

无效，因为可能有更多.draggable div

Answer 1

~~如果您致电.draggable().draggable()，则可以仅停用预订：~~

<强>更新

要在删除预订后禁用该表（不可拖动），请执行以下操作：

$('.table').droppable({
    activeClass: 'grey',
    hoverClass: 'yellow',
    accept: '.draggables',
    drop: function(event, ui){
       $(this).draggable('disable');
   }
}).draggable();;

$('.draggables').draggable({
    snap: '.table',
    snapMode: 'inner'
});

这是一个简单的Demo Fiddle

当其他div被丢弃时，使可拖动的，可放置的div不可拖动

1 个答案: