使用JavaScript createElement()方法在keydown上创建的元素;t使用jQuery draggable()方法
我正在做一个拖放项目,可以将项目添加到工作区域并拖动以定位。我试图使用一个键代码创建多个相同类型的元素,所有元素都可以拖动。只要页面加载时创建了draggable元素,jQuery函数就可以工作,但是如果它是使用函数创建的,draggable()方法就不能工作。有没有办法让函数识别用函数创建的元素使用JavaScript createElement()方法在keydown上创建的元素;t使用jQuery draggable()方法,javascript,html,jquery,css,jquery-ui-draggable,Javascript,Html,Jquery,Css,Jquery Ui Draggable,我正在做一个拖放项目,可以将项目添加到工作区域并拖动以定位。我试图使用一个键代码创建多个相同类型的元素,所有元素都可以拖动。只要页面加载时创建了draggable元素,jQuery函数就可以工作,但是如果它是使用函数创建的,draggable()方法就不能工作。有没有办法让函数识别用函数创建的元素 <!doctype html> <html lang="en"> <head> <meta charset="utf-8&q
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Draggable Div Test</title>
<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>
<style>
.test {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="area" style="border: 1px solid black; width: 500px; height: 500px;"> </div>
<script>
var area = document.getElementById("area");
function duplicate(e) {
switch(e.keyCode) {
case 49:
var test = document.createElement("div");
test.classList.add("test");
test.classList.add("draggable");
console.log(test.classList)
test.style.backgroundColor = "blue";
area.appendChild(test);
break
}
}
document.addEventListener("keydown", duplicate)
$( function() {
$( ".test" ).draggable();
} );
</script>
</body>
</html>
可拖动Div试验
.测试{
宽度:50px;
高度:50px;
}
var区域=document.getElementById(“区域”);
功能复制(e){
开关(如钥匙代码){
案例49:
var测试=document.createElement(“div”);
test.classList.add(“test”);
test.classList.add(“draggable”);
console.log(test.classList)
test.style.backgroundColor=“蓝色”;
区域.儿童(试验);
打破
}
}
文件。添加的文件列表(“向下键”,重复)
$(函数(){
$(“.test”).draggable();
} );
谢谢插入元素后重新初始化插件即可 比如:
$(".test").draggable("destroy").draggable();
jQuery DragTable有一个名为克隆的函数:
$(function() {
i = 0
$("#draggable").draggable({
helper: 'clone',
appendTo: "#droppable",
});
$("#droppable").droppable({
accept: "#draggable",
});
i++;
var $obj = ui.helper.clone().attr( 'data-name', 'newelementdropped' +i).draggable({
stop : function (event, ui) {
YOUR CODE
});
}
请看以下答案:我尝试了这个方法,得到了相同的结果。有没有其他方法可以重新初始化插件?谢谢