在拖动开始之前取消拖动

Question

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

    $(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' )