Abbrechen ziehen, bevor es startet

Question

Ich benutze jQuery UI sortierbar und versuche einfach zu verhindern, ziehen, wenn die Bedingung wahr ist. Ich bin auf diese Lösung gestoßen: https://stackoverflow.com/a/18470982/3758078 Aber das bricht den Ziehvorgang ab, wenn der Ziehvorgang stoppt, nicht bevor es beginnt. Andere Lösungen empfehlen, return false; im sort: Ereignis zu verwenden, aber das gibt einfach einen Fehler zurück.

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

Answer 1

Hier ist ein funktionierendes Beispiel mit dem Rückruf start.
Sie können die allowdrag Checkbox verwenden, um die schlepp Funktionalität zu aktivieren/deaktivieren:

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

Sie können den if (!$('#allowdrag').is(':checked')) { Teil ändern, was Sie, um zu überprüfen, wollen die Drag-Option zu aktivieren/deaktivieren .

Answer 2

Try it ....

https://stackoverflow.com/a/1324065

Könnte ein DisableDrag (myObject) und eine EnableDrag (myObject) Funktion

myObject.draggable('disable')

Dann

erstellen

myObject.draggable('enable')