Question

我在父级中有一个具有draggable属性的diff。当我静态地创建div时，它可以工作，但是当我动态创建它时它是相同的。它不起作用。

＆GT;

    <!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>

知道这里出了什么问题。

提前致谢 382 4

Answer 1

这个对我有用。看看这里：http://jsfiddle.net/csdtesting/cpj7zx2q/

JS代码：

  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;
  }

如果您曾尝试仅在jsfiddle中查看它，请查看"this question about function is undefined"

动态创建的div没有拖动属性

1 个答案: