0

今のところ、要素を HTML div タグに追加する 3 つの関数と 2 つのボタンがあります。

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

デフォルトの動作では、新しい要素を追加するたびに前の要素に接続されます。したがって、1 つの要素を移動すると、追加されたすべての要素が移動します。私が望むのは、各要素を他の要素から自由に移動できるようにすることです。

4

1 に答える 1

1

これを試してみてください

    $(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 に答える