gpt4 book ai didi

javascript - 如何使 jquery 创建的 div 可拖动?

转载 作者:行者123 更新时间:2023-11-28 05:09:04 25 4
gpt4 key购买 nike

嗨,我想知道是否有可能的解决方案来创建一个可拖动的 div,例如在 javascript 中创建的:

var output = "  ";
output+= ' <div class=" image">';
output+= ' <p class="p-id"><strong>' + data.properties[i].id+ '<strong></p>';
output+= '<img class="pic" src="'+ data.staff[i].picture + '"/>';
output+= '</div>';

document.getElementById("right" ).innerHTML = output;

有没有办法让这个 div class="image"可拖动,因为我遇到了问题,想知道是否有可能的解决方案。如有帮助,我们将不胜感激

为了更清楚地说明,我想要一个与下面的代码类似的方法,它使 java 创建 <div class="image">可拖动。我试过这个方法:

$(".image ").draggable({
revert:true,

drag:function () {
$(this).addClass("active");
$(this).closest(".class ").addClass("active");
},

stop:function () {
$(this).removeClass("active").closest(".image").removeClass("active");
}
});

最佳答案

如果您使用的是 jQuery-ui,那么您只需在将元素添加到 DOM 后添加 $('.image').draggable(); 即可。

var output = "  ";
output+= ' <div class=" image">';
output+= ' <p class="p-id"><strong>#<strong></p>';
output+= '<img class="pic" src="#"/>';
output+= '</div>';

document.getElementById("right" ).innerHTML = output;
$('.image').draggable();
.image {
width:100px;
height: 100px;
background-color: red;
}
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script
src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
</head>
<body>
<div id="right"></div>
</body>
</html>

关于javascript - 如何使 jquery 创建的 div 可拖动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41526783/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com