如何在 div 中拖动 div？

Question

我想使用拖放机制添加一些 div。我有一个主要的 div，我在其中添加了一些其他内容：当我将 div texted "HI" 拖到 div 下方时，我附加了另外两个名为 Drag 的 div并放入主 div。

现在我想要的是能够将 div 短信 "Drag" 拖放到 div 短信 "Drop" 中。我怎样才能做到这一点？

这是我的代码：

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

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

你也可以在这个jsFiddle

上看到

Answer 1

无法拖放 div 文本 "Drag" 的问题是您在 .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> ' );
    }
});

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

结果是这样的：

$(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) {}

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

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

如何在 div 中拖动 div？

How to drag a div within a div?

html

javascript

jquery

jquery-ui

jquery-ui-draggable