如何在div中拖动div？

Question

我想使用拖放机制添加一些div。我有一个主div，我在其中添加了一些其他内容：当我将div发短信“HI”拖到div下方时，我将另外两个名为Drag and Drop的div追加到主{ {1}}。

现在我想要的是能够拖动div发短信“拖动”，并将其放入div发短信“Drop”。我怎样才能做到这一点？

这是我的代码：

div

$(function() {
  $(".draggable").draggable({
    revert: true,
    helper: 'clone',
    start: function(event, ui) {

      $(this).fadeTo('fast', 0.5);
    },
    stop: function(event, ui) {
      $(this).fadeTo(0, 1);
    }
  });
  $("#div2").draggable({
    start: function(event, ui) {
      alert('div2-drag');
      $(this).fadeTo('fast', 0.5);
    },
    stop: function(event, ui) {
      $(this).fadeTo(0, 1);
    }
  });
  $("#div1").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
      alert('div1-drop');
      //this.value = $(ui.draggable).text();
      $("#mydiv").append('<div id="div1" ></div><div id="div2" ></div> ');
    }
  });


  $("#mydiv").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
      alert('mydiv - drop');
      //this.value = $(ui.draggable).text();
      $("#mydiv").append('<div id="div1"  > Drop</div><div id="div2"  ondragstart="drag(event)" > Drag</div> ');
    }
  });
  $("#mydiv_second").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
      alert('mydivsecond- drop');
      //this.value = $(ui.draggable).text();
      $("#mydiv_second").append('<div id="div1"  > Drop</div><div id="div2"  ondragstart="drag(event)" > Drag</div> ');
    }
  });
});

body {
  font-family: sans-serif;
  font-size: 11pt;
}
.draggable {
  width: 250px;
  height: 20px;
  background-color: #e6eaff;
  border: 2px solid #3399cc;
  margin-bottom: 1em;
  padding: 4px;
  cursor: default;
}
.active {
  border: 2px solid #6699ff;
}
#mydiv {
  width: 350px;
  height: 300px;
  background-color: #e6eaff;
  border: 2px solid #3399cc;
  margin-bottom: 1em;
  padding: 4px;
  cursor: default;
}
#mydiv_second {
  width: 350px;
  height: 300px;
  background-color: #e6eaff;
  border: 2px solid #3399cc;
  margin-bottom: 1em;
  padding: 4px;
  cursor: default;
}
#div1 {
  width: 150px;
  height: 70px;
  background-color: #e6eaff;
  border: 2px solid #3399cc;
  margin-bottom: 1em;
  padding: 4px;
  cursor: default;
}
#div2 {
  width: 30px;
  height: 30px;
  background-color: #e6eaff;
  border: 2px solid #3399cc;
  margin-bottom: 1em;
  padding: 4px;
  cursor: move;
}

您也可以在此jsFiddle

上看到它

Answer 1

为什么你不能拖放div发短信＆＃34;拖动＆＃34;是在创建元素之前执行.draggable()和.dropable()方法（在页面加载时执行此操作）。

如果您移动此代码，则修复此问题：

$("#div2").draggable({
    start: function(event, ui) {
        alert('div2-drag');
        $(this).fadeTo('fast', 0.5);
    },
    stop: function(event, ui) {
        $(this).fadeTo(0, 1);
    }
});
$("#div1").droppable({
    hoverClass: 'active',      
    drop: function(event, ui) {
        alert('div1-drop');
        //this.value = $(ui.draggable).text();
        $( "#mydiv" ).append( '<div id="div1" ></div><div id="div2" ></div> ' );
    }
});

并在创建$("#mydiv").droppable和#div1之后立即将其放在#div2部分中（请注意，您始终使用相同的ID创建div s ，当你添加多个时，这可能会产生问题。）

结果如下：

＆＃13;

＆＃13;

$(function() {
  $(".draggable").draggable({
    revert: true,
    helper: 'clone',
    start: function(event, ui) {

      $(this).fadeTo('fast', 0.5);
    },
    stop: function(event, ui) {
      $(this).fadeTo(0, 1);
    }
  });


  $("#mydiv").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
      alert('mydiv - drop');
      //this.value = $(ui.draggable).text();
      $( "#mydiv" ).append( '<div id="div1"  > Drop</div><div id="div2"  ondragstart="drag(event)" > Drag</div> ' );

      $("#div2").draggable({
        start: function(event, ui) {
          alert('div2-drag');
          $(this).fadeTo('fast', 0.5);
        },
        stop: function(event, ui) {
          $(this).fadeTo(0, 1);
        }
      });
      $("#div1").droppable({
        hoverClass: 'active',      
        drop: function(event, ui) {
          alert('div1-drop');
          //this.value = $(ui.draggable).text();
          $( "#mydiv" ).append( '<div id="div1" ></div><div id="div2" ></div> ' );
        }
      });
    }
  });
  $("#mydiv_second").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
      alert('mydivsecond- drop');
      //this.value = $(ui.draggable).text();
      $( "#mydiv_second" ).append( '<div id="div1"  > Drop</div><div id="div2"  ondragstart="drag(event)" > Drag</div> ' );
      $("#div2").draggable({
        start: function(event, ui) {
          alert('div2-drag');
          $(this).fadeTo('fast', 0.5);
        },
        stop: function(event, ui) {
          $(this).fadeTo(0, 1);
        }
      });
      $("#div1").droppable({
        hoverClass: 'active',      
        drop: function(event, ui) {
          alert('div1-drop');
          //this.value = $(ui.draggable).text();
          $( "#mydiv" ).append( '<div id="div1" ></div><div id="div2" ></div> ' );
        }
      });
    }
  });
});

function drag(e) {}

＆＃13;

body {
    font-family: sans-serif;
    font-size: 11pt;
}
.draggable {
    width: 250px;
    height: 20px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: default;
}
.active {
    border: 2px solid #6699ff;
}

#mydiv
{
    width: 350px;
    height: 300px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: default;
}
#mydiv_second
{
    width: 350px;
    height: 300px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: default;
}
#div1
{
    width: 150px;
    height: 70px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: default;
}
#div2
{
    width: 30px;
    height: 30px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: move;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div class="draggable">hi!</div>
<div id="mydiv"></div>
<div id="mydiv_second"></div>

＆＃13;

＆＃13;

＆＃13;