Question

有没有办法移动，例如使用Drag＆amp; Drop输入html标签？（JQuery）

喜欢此网站： click

你可以从左侧的列表中取出你的html标签，你可以移动小方框内的元素......

Answer 1

也许你应该看看jQuery UI，它具有内置的拖放功能

Answer 2

看看this overview。但我认为您正在搜索 Droppables：接受可拖动元素方法。

这是网页上的示例，不是来自我：

<!doctype html>
<html lang="en">
  <head>

  <style>
    #makeMeDraggable { float: left; width: 300px; height: 300px; background: red; }
    #makeMeDroppable { float: right; width: 300px; height: 300px; border: 1px solid #999; }
  </style>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

  <script type="text/javascript">

  $( init );

  function init() {
    $('#makeMeDraggable').draggable();
    $('#makeMeDroppable').droppable( {
      drop: handleDropEvent
    } );
  }

  function handleDropEvent( event, ui ) {
    var draggable = ui.draggable;
    alert( 'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' );
  }

  </script>

  </head>
<body>

<div id="content" style="height: 400px;">

  <div id="makeMeDraggable"> </div>
  <div id="makeMeDroppable"> </div>

</div>

</body>
</html>

如何使用拖放操作移动HTML元素

2 个答案: