JQuery ziehbares Element bewegt sich nicht

Question

Ich habe ein einfaches ziehbares Beispiel, das nicht funktioniert. Dragging-Element (div mit grünem Rand) bewegt sich nicht, wenn ich versuche, es mit der Maus zu bewegen.

Mein Code zum Ziehen:

$("#divDraggable").draggable({ 
    revert: 'invalid', 
    helper: 'clone' 

    }); 

Ich möchte nur Element in eine andere (größere) Element kopieren. Wenn es nicht fallen gelassen wird, bringen Sie es an seine ursprüngliche Position zurück. Warum funktioniert es nicht?

$(function(){ 
 
    
 
    $("#divDraggable").draggable({ 
 
    revert: 'invalid', 
 
    helper: 'clone' 
 
    
 
    }); 
 

 

 

 
    
 
    
 
    $("#divDroppable").droppable({ 
 
    accept: '.draggable', 
 
    drop: function (event, ui) { 
 
     debugger; 
 
     var droppable = $(this); 
 
     var draggable = ui.draggable; 
 
     draggable.clone().appendTo(droppable);   
 
    } 
 
    
 
    
 
    }); 
 

 
    
 
    
 
})

#divDroppable{ 
 
    border:1px solid black; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
#divDraggable{ 
 
    margin-top: 50px; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 2px solid green; 
 
}

<script src="https://test73.webo.hosting/Scripts/jquery-1.11.0.min.js"></script> 
 
<script src="https://test73.webo.hosting/Scripts/jquery-ui-1.10.4.custom.js"></script> 
 
<link href="https://test73.webo.hosting/Styles/jquery-ui-1.10.0.custom.css" rel="stylesheet"/> 
 

 

 
<div id="divDroppable" class="draggable"></div> 
 
<div id="divDraggable"></div>

Answer 1

Hier gehen Sie mit einer Lösung https://jsfiddle.net/4hzcq0q5/

$(function(){ 
 
    
 
    $("#divDraggable").draggable({ 
 
    revert: 'invalid', 
 
    helper: 'clone', 
 
    }); 
 
    
 
    $("#divDroppable").droppable({ 
 
    accept: '.draggable', 
 
    drop: function (event, ui) { 
 
     var droppable = $(this); 
 
     var draggable = ui.draggable; 
 
     draggable.clone().appendTo(droppable);   
 
    } 
 
    }); 
 
})

#divDroppable{ 
 
    border:1px solid black; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
#divDraggable{ 
 
    margin-top: 50px; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 2px solid green; 
 
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="divDroppable" ></div> 
 
<div id="divDraggable" class="draggable"> 
 

 
</div>

Ausgabe mit y war ou class class="draggable" hinzugefügt zu drop statt ziehbares div.

Answer 2

Ihr Problem mit helper Attribut in ziehbar. Bitte überprüfen Sie diese Geige, ich entfernen Helper-Eigenschaft und seine Arbeit https://jsfiddle.net/x6hdan8L/1/

Answer 3

Syntax war falsch. Es sollte so aussehen:

$("#divDraggable").draggable({ 
    revert: true, 
    helper: 'clone' 

    }); 

Arbeitsbeispiel:

draggable