Question

我的网页上有几个课程，用户可以将其拖放到页面中的任意位置。

HTML CODE

<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代码来实现此功能。请协助

Answer 1

你应该在jquery UI中使用draggable插件

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

Jquery Example

有关更多信息，请访问以下链接

StackOverflow

或：

Draggable Example

Answer 2

您可以在jquery UI中使用draggable插件

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

Answer 3

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

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

$（“body＆gt; div”）。draggable（）;

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

$（ “拖动容器。”）可拖动（）;

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

Answer 5

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

您的头部需要有两个外部文件。
第一个是jquery，第二个是jquery ui
您可以选择任何div并将可拖动选项添加到此$("#drag").draggable();
在firebug窗口中查看c.browser is not defined和c.curPos is not defined等错误。
由于您使用的是jquery版本，可能会出现这些错误，因为在jquery 1.9中删除了c.browser。
你的最终可拖动代码看起来应该是这样的。

http://jsfiddle.net/LHELM/

拖放div

5 个答案: