拖放 div
Posted
技术标签:
【中文标题】拖放 div【英文标题】：Drag and drop 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 代码来实现这个功能。请帮忙
【问题讨论】：
【参考方案1】：你应该在 jquery UI 中使用可拖动插件
$('#drag1').draggable();
Jquery Example
更多信息请点击以下链接
***
或者：
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/
【讨论】：
以上是关于拖放 div的主要内容，如果未能解决你的问题，请参考以下文章