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 class="draggable" added to dropped div instead of draggable div。

Answer 2

你的問題在拖動helper屬性。請檢查這個小提琴，我刪除幫手屬性和它的工作https://jsfiddle.net/x6hdan8L/1/

Answer 3

語法錯了。它應該是這樣的：

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

    }); 

工作例如：

draggable