Jquery 无法在可拖放区域上重新绘制已拖放的元素_Jquery_Jquery Ui_Jquery Ui Draggable_Jquery Ui Droppable

Jquery 无法在可拖放区域上重新绘制已拖放的元素

jquery jquery-ui

Jquery 无法在可拖放区域上重新绘制已拖放的元素,jquery,jquery-ui,jquery-ui-draggable,jquery-ui-droppable,Jquery,Jquery Ui,Jquery Ui Draggable,Jquery Ui Droppable,我正在尝试创建一个页面，我想在其中拖动一个按钮的地方。如果我想更改按钮的位置，我想再次拖动它。但它不起作用这是我的密码 <!DOCTYPE html> <html> <head> <title>test page</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /> <link rel="stylesheet" href=

我正在尝试创建一个页面，我想在其中拖动一个按钮的地方。如果我想更改按钮的位置，我想再次拖动它。但它不起作用

这是我的密码

<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery-ui-1.11.2.custom/jquery-ui.min.css" />
<link rel="stylesheet" href="extern1.css" />
<script type="text/javascript" src="jquery-ui-1.11.2.custom/external/jquery.js>
</script>
<script type="text/javascript" src="jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
<script type="text/javascript" src="app1.js"></script>
</head>
<body>
<button id="drag" class="btn btn-primary">Drag me</button>
<div id="drop">Drop here</div>
</body>
</html>


测试页
您只需将克隆的元素初始化为draggable（）
，如下所示：

$（函数（）{
$（“#拖动”）。可拖动({
光标：“移动”，
助手：函数（事件）{
返回$（'Button'）；
},
取消：假
});
$（“#下降”）。可下降({
drop：函数（事件、用户界面）{
//克隆并删除辅助元素中的定位
var$newDiv=ui.helper.clone（false）
.removeClass（'ui-draggable-dragging'）
.css({
位置：'绝对'
}).draggable（{//使其可拖动
取消：假
}).附于（本）；
}
});
})
#放下{
宽度：100px；
高度：100px；
背景：道奇蓝；
}

拖我
拖放到此处
，但它会在第二次拖动时创建一个重复的元素。@AshishSantikari这是根据您的逻辑进行的。您正在drop
上创建新元素。您的问题是“无法重新绘制已删除的元素”。我解决了这个问题。现在，如果您只是拖动新元素，它将不会创建dup元素。如果dropdropable中的项目，那么它将创建新的Dragable，因为这就是您所写的内容。@AshishSantikari BTW-重新阅读您的问题。答案回答了所问的问题。你问了什么，你就会得到答案。。。我们无法读懂你的心思。。。因此，也许可以用一个清晰的问题陈述来更新这个问题。解释到底需要做什么。好的。那么你能帮我解决我的“应该是”问题吗？@AshishSantikari当然，我只是告诉过你，这样你就可以在将来提出更好的问题。
$(function () {
$('#drag').draggable({
    cursor : "move",
    helper : function (event) {
        return $('<div class="col-xs-2"><button class="btn btn-primary check">
Button</button></div>');
    },
    //appendTo : "#drop",
    cancel : false
});
$("#drop").droppable({
    drop : function (event, ui) {
        //clone and remove positioning from the helper element
        var newDiv = $(ui.helper).clone(false)
            .removeClass('ui-draggable-dragging')
            .css({
                position : 'absolute'
            });
        $(this).append(newDiv);
    }
});
})