Question

我使用jQuery UI进行排序，如果条件为真，我只是试图阻止拖动。我已经遇到过这个解决方案：https://stackoverflow.com/a/18470982/3758078但是在拖动停止时取消阻止，而不是在它开始之前。其他解决方案建议在return false;事件中使用sort:，但这只会返回错误。

    $(elements).sortable({
        start: function() {
           if( true ) {
               //cancel dragging before it begins
           }
        }
    });

Answer 1

以下是使用start回调的工作示例您可以使用allowdrag复选框启用/禁用拖动功能：

$(document).ready(function () {
    $("#draggable").draggable({
      revert: "invalid",
      start: function(e) {
        if (!$('#allowdrag').is(':checked')) {
          e.preventDefault();
        }
      }
    });
    $("#Dropable").droppable({
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            alert("dropped!");
        },
        tolerance: 'fit'
    });
});

#draggable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
}
#Dropable {
    height:300px;
    width:400px;
    border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<input type="checkbox" id="allowdrag" /><label for="allowdrag"> Allow drag</label><br />
<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
<div id="Dropable">Droppable area</div>

您可以将if (!$('#allowdrag').is(':checked')) {部分更改为您要检查的内容，以启用/禁用拖动选项。

Answer 2

试试吧......

https://stackoverflow.com/a/1324065

可以创建DisableDrag（myObject）和EnableDrag（myObject）函数

myObject.draggable( 'disable' )

然后

myObject.draggable( 'enable' )

在开始之前取消拖动

2 个答案: