JQueryのドラッグ可能な要素が移動しない

Question

私は単純なドラッグ可能な例を持っていますが、これは機能しません。ドラッグ可能な要素（緑色の枠線付きのdiv）は、マウスで移動しようとすると移動しません。

ドラッグのための私のコード：

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

    }); 

を私はちょうど別の（大きな）要素に要素をコピーします。落とされていない場合は、それを初期位置に戻します。なぜそれは働いていないのですか？

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

はあなたが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>

問題をyとしたソリューションで行きますouクラスclass="draggable"がに追加されましたdraggable divの代わりにが削除されました。

Answer 2

ドラッグ可能でhelper属性を持つあなたの問題。このフィドルを確認してください。私はヘルパーの財産とその仕事を取り除きます。https://jsfiddle.net/x6hdan8L/1/

Answer 3

構文が間違っていました。それはこのようにする必要があります：

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

    }); 

の作業例：ここでは

draggable