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