0

现在我有三个函数和两个按钮，可以将元素添加到 HTML div 标签：

<style>
#draggable { width: 600px; height: 800px; padding: 0.5em;}
#EditorArea { width: 600px; height: 800px; padding: 0.5em; border: 1px solid black}
</style>
<script type="text/javascript">
 $(function() {
$( "#draggable" ).draggable();
}); 


function MinMax() {
 $("#draggable").append("<table border= 1px><tr><td>Element</td><td><input type='textbox'/></td></tr><tr><td>Marked as</td><td><input type='textbox'/></td><tr><td>Min</td><td><input type='textbox'/></td><tr><td>Max</td><td><input type='textbox'/></td><tr><td>Преди ремонт</td><td><input type='textbox'/></td><tr><td>След ремонт</td><td><input type='textbox'/></td><tr><td>Time before</td><td><input type='textbox'/></td><tr><td>Time after</td><td><input type='textbox'/></td></table>");
};

function ShowDate() {
 $("#draggable").append("<p class='dateTime' style='width:120px; border: 2px solid black'>DateTime</p>");
}

</script>
</head>
<body>
<button type="button" onclick="MinMax()">MinMax</button>
<button type="button" onclick="ShowDate()">DateTime</button>
<div id="EditorArea">
<div id="draggable"></div>
</div>

现在默认行为是每次我添加新元素时，它都会连接到前一个元素，依此类推，因此当我移动一个元素时，我会移动所有添加的元素。我想要的是能够从其他元素中自由移动每个元素。

4

1 回答 1

1

试试这个FIDDLE

    $(function() {
        $( "#draggable" ).children().draggable();
         $('#MinMax').click(function(){
              $("#draggable").append("<table border= 1px><tr><td>Element</td><td><input type='textbox'/></td></tr><tr><td>Marked as</td><td><input type='textbox'/></td><tr><td>Min</td><td><input type='textbox'/></td><tr><td>Max</td><td><input type='textbox'/></td><tr><td>Преди ремонт</td><td><input type='textbox'/></td><tr><td>След ремонт</td><td><input type='textbox'/></td><tr><td>Time before</td><td><input type='textbox'/></td><tr><td>Time after</td><td><input type='textbox'/></td></table>");
             $( "#draggable" ).children().draggable();
         });
          $('#ShowDate').click(function(){
               $("#draggable").append("<p class='dateTime' style='width:120px; border: 2px solid black'>DateTime</p>");
              $( "#draggable" ).children().draggable();
          });
    });
于 2013-04-16T12:39:01.380 回答