Html 动态创建的div没有drag属性
我在父级中有一个具有draggable属性的diff。当我静态创建div时,它工作,但当我动态创建div时,它不工作 > 知道这里出了什么问题吗 提前谢谢Html 动态创建的div没有drag属性,html,draggable,Html,Draggable,我在父级中有一个具有draggable属性的diff。当我静态创建div时,它工作,但当我动态创建div时,它不工作 > 知道这里出了什么问题吗 提前谢谢 ~S这个对我很有用。看看这里: JS代码: 如果您试图看到它仅在JSFIDLE中工作,请查看正在添加的块仍然不可拖动。现在请查看。我在添加div之后将可拖动的块移动到addblacklog。这只是因为您在添加到DOM的元素之前触发了可拖动的块: <!DOCTYPE html> <html> <head&g
~S这个对我很有用。看看这里: JS代码:
如果您试图看到它仅在JSFIDLE中工作,请查看正在添加的块仍然不可拖动。现在请查看。我在添加div之后将可拖动的块移动到addblacklog。这只是因为您在添加到DOM的元素之前触发了可拖动的块:
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( ".dragablelement" ).draggable({ containment: "parent", scroll: false });
});
function actionsubmitpressed() {
}
</script>
<style type="text/css">
* {margin: 10; padding: 10;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: middle; font-size: 12px;}
#container {width: 95%; background: #ffe6d5;}
#left {width: 32%; background: #ff5555;}
#middle {width: 32%; background: #ff5555;}
#right {width: 32%; background: #ff5555;}
#black_heading {width: 96%; background: black;}
#heading-3 { background: white;}
#sub_heading {border: 1px solid; border-radius: 10px; text-align: center; padding: 2px;}
.dragablelement { display: block; background: green;border: 1px solid; border-radius: 5px;}
.column_41 {display: inline-block; *display: inline; zoom: 1; vertical-align: middle; font-size: 12px;}
.column_41 {width: 20%; height: 200px; background: #ffaaaa; border-radius: 10px; padding: 5px;}
</head>
<body>
<div id="container">
<div id="black_heading" align='right'>
<div id="left" align='right'>Action:
<button id = 'actionsubmitbutton' onClick='addbacklog()' > Submit
</button>
</div>
</div>
<div id="heading-3">
<div id = 'backlog_container' class="column_41"><div id='sub_heading'>Backlog </div>
<div id="draggable" class="dragablelement ">
Hello
</div>
</div>
</div>
</div>
<script type="text/javascript">
function addbacklog() {
bcklg = document.getElementById("backlog_container");
bcklg.appendChild(getBacklogBlock());
}
function getBacklogBlock(){
newdiv = document.createElement('div');
newdiv.setAttribute('class', 'dragablelement');
$( .dragablelement ).draggable({axis: "x" });
newnode = document.createTextNode('Hello world');
newdiv.appendChild(newnode);
return newdiv;
}
</script>
</body>
</html>
window.addbacklog = function() {
bcklg = document.getElementById("backlog_container");
bcklg.appendChild(getBacklogBlock());
$(".dragablelement").draggable({axis: "x" });
}
window.getBacklogBlock = function() {
newdiv = document.createElement('div');
newdiv.setAttribute('class', 'dragablelement');
newnode = document.createTextNode('Hello world');
newdiv.appendChild(newnode);
return newdiv;
}