拖放 div答案 - 爱码网

【问题标题】：Drag and drop div拖放 div
【发布时间】：2014-02-22 06:13:21
【问题描述】：

我的网页中有几个类，我希望用户将其拖放到页面中他们想要的任何位置。

HTML 代码

<html>
<head>
<style>
  #drag{ width: 100px; height: 100px; padding: 0.5em; background:red; margin-bottom:10px;}
  #drag1{ width: 100px; height: 100px; padding: 0.5em; background:blue; margin-bottom:10px;}
  #drag2{ width: 100px; height: 100px; padding: 0.5em; background:green; margin-bottom:10px;}
  #drag3{ width: 100px; height: 100px; padding: 0.5em; background:yellow; margin-bottom:10px;}
</style>
</head>
<body>

<div id="drag">
  <p>Drag me around</p>
</div>

<div id="drag1">
  <p>Drag me around</p>
</div>

<div id="drag2">
  <p>Drag me around</p>
</div>

<div id="drag3">
  <p>Drag me around</p>
</div>


</body>
</html>

我想要最简单的 jquery 代码来实现这个功能。请帮忙

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你应该在 jquery UI 中使用可拖动插件

$('#drag1').draggable();

Jquery Example

更多信息请点击以下链接

StackOverflow

或者：

Draggable Example

【讨论】：

【解决方案2】：

您可以在 jquery UI 中使用可拖动插件

$('#drag1').draggable();

【讨论】：

【解决方案3】：

我同意，你可以使用 jqueryUI 的draggable。

对于您的 html 示例，您可以这样做：

$("body > div").draggable();

您还可以为所有可拖动的 div 添加一个类，例如“draggable-container”。并使用：

$(".draggable-container").draggable();

【讨论】：

【解决方案4】：

这里是jquery拖拽的完整代码

    <html>
    <head>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

       <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>

        $(document).on("ready", function(){
        var c = 5;
        $( "#drag, #drag1, #drag2, #drag3" ).draggable({revert: true});
        $( "#droppable" ).droppable({
                accept      : '#drag, #drag1, #drag2, #drag3',
                activeClass : 'drag-active',
                hoverClass  : 'drop-hover',
           drop: function( event, ui ) {
            var source = ui.draggable.clone();
            source.removeAttr( "style" );
            var style = {
                position: "absolute",
                top: c,
                left: c
            }
            source.css( style  );
            $("#droppable").append(source);
            c += 10;
          }
        });

      });
      </script>

    <style>
      #drag{ width: 100px; height: 100px; padding: 0.5em; background:red; margin-bottom:10px;}
      #drag1{ width: 100px; height: 100px; padding: 0.5em; background:blue; margin-bottom:10px;}
      #drag2{ width: 100px; height: 100px; padding: 0.5em; background:green; margin-bottom:10px;}
      #drag3{ width: 100px; height: 100px; padding: 0.5em; background:yellow; margin-bottom:10px;}
      #droppable{ width: 150px; height: 150px; border: 1px solid black;position:absolute;top:0;right:0;}
    </style>

    </head>
    <body>

    <div id="drag">
      <p>Drag me around</p>
    </div>

    <div id="drag1">
      <p>Drag me around</p>
    </div>

    <div id="drag2">
      <p>Drag me around</p>
    </div>

    <div id="drag3">
      <p>Drag me around</p>
    </div>

    <div id="droppable">
    <p>drop here</p>

    </div>

    </body>

    </html>

【讨论】：

感谢您的代码。有用。但问题是我想将这些框放在页面中的任何位置，而不是特定部分。这可能吗？
是的，从可拖动部分中删除 {revert: true}。颜色框可以轻松移动页面上的任何位置。

【解决方案5】：

好的，我会一步一步指导你：

您的 head 部分中需要有两个外部文件。
第一个是jquery，第二个是jquery ui
您可以选择任何 div 并向其添加可拖动选项，如下所示$("#drag").draggable();
在 firebug 窗口中查看 c.browser is not defined 和 c.curPos is not defined 等错误。
这些错误可能是由于您使用的 jquery 版本引起的，因为 c.browser 在 jquery 1.9 中已被删除。
您最终的可拖动代码应该看起来像这样。

http://jsfiddle.net/LHELM/

【讨论】：