如何使用jQuery Draggable和Droppable实现拖拽功能

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用jQuery Draggable和Droppable实现拖拽功能相关的知识，希望对你有一定的参考价值。

juqery  easy-ui  里面有着这两个功能,看着API做很简单,给你个参考脚本

<div class="row-fluid">
     <div>
           <div id="draggable"><dl></dl></div>
     </div>
     <div>
           <div id="droppable"><dl></dl></div>
     </div>
</div>

//拖拽控件初始化
function InitDrop() 
    $("#draggable dd").draggable(
        addClasses: false,
        appendTo: "body",
        helper: "clone",
        opacity: 0.65,
        cursor: "move",
        cursorAt:  right: 0 ,
        revert: false //当元素拖拽结束后，元素回到原来的位置
    );
    $("#droppable").droppable(
        addClasses: false,
        activeClass: "hover_color",
        hoverClass: "hover_color",
        accept: "dd",
        tolerance: "touch",
        drop: function (event, ui) 
            $(this).find('dl').append(ui.draggable);
        ,
        out: function (event, ui)   //当一个被允许（accept）的可拖拽元素移出可拖放元素时激活。
            $("#draggable").find('dl').append(ui.draggable)
        
    ).sortable();

 参考技术A <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>checkbox</title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/1.js" type="text/javascript"></script>
</head>

<body>
<table id="table1">
<tr>
<td><input type="checkbox" value="1"/>1</td>
<td id="k_1"><input type="text" name="student" id="s_1" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="2"/>2</td>
<td id="k_2"><input type="text" name="student" id="s_2" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="3"/>3</td>
<td id="k_3"><input type="text" name="student" id="s_3" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="4"/>4</td>
<td id="k_4"><input type="text" name="student" id="s_4" readonly="true"/></td>
</tr>
</table>
</body>
</html>

-------------------------------------------------------------
$(document).ready(function()
$("td[id^='k_']").hide();
var check = $(":checkbox"); //得到所有被选中的checkbox
var actor_config; //定义变量
check.each(function(i)
actor_config = $(this);
actor_config.click(
function()
if($(this).attr("checked")==true)
$("#k_"+$(this).val()).show();
else
$("#k_"+$(this).val()).hide();


);
);

);本回答被提问者和网友采纳

将 JQuery UI.Resizable() 和 UI.Draggable() 与 iFrame 一起使用时遇到问题

【中文标题】将 JQuery UI.Resizable() 和 UI.Draggable() 与 iFrame 一起使用时遇到问题【英文标题】：Trouble Using JQuery UI.Resizable() and UI.Draggable() with an iFrame 【发布时间】：2010-10-05 06:41:50 【问题描述】：

我正在尝试使用 JQuery 创建一个对话窗口。到目前为止，我正在取得进展，但遇到了一些与 iframe 相关的问题......我知道 iframe 通常不受欢迎，但它们是唯一能满足项目要求的东西。

无论如何，我可以成功实现可调整大小和可拖动的插件，但是如果用户快速拖动并将鼠标悬停在对话框内部 div 中包含的 iframe 上，我会遇到问题。有点难以解释，但下面的代码应该有助于显示正在发生的事情。

似乎一旦鼠标越过 iframe，iframe 就会窃取 mousedown 事件的焦点。我想知道有没有办法解决这个问题。

谢谢， 克里斯

<div id="container" style="border: solid 1px Black; padding: 10px 10px 10px 10px; height: 520px; width: 420px;">
    <iframe id="if" src="http://google.com" style="width: 400px; height: 500px;"></iframe>
</div>

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.ui.all.js"></script>
<script type="text/javascript">

$(document).ready(function()
    
        $("#container").draggable();
        $("#container").resizable(
            
                alsoResize: "#if"
            
        ).parent().draggable();
    
);

编辑：为了运行应用程序，需要下载代码中引用的 jquery 文件。不过，代码应该向后兼容以前的版本。 编辑：我稍微修改了代码以简化一些事情。 编辑：我找到了使用prototype-window 库解决此问题的替代方法。我宁愿使用 jQuery 而不是原型，因为许多基准测试要好得多，但由于我的时间紧迫，原型路线会做。如果有人有一些建议，我仍然有兴趣弄清楚这一点。再次感谢您的所有帮助。 编辑：如果我将 iframe 更改为 div，上面的代码可以完美运行。问题似乎只是涉及 iframe 时可拖动和可调整大小的扩展功能的方式。

【问题讨论】：

【参考方案1】：

最近遇到同一个resizable/redraggable problem。

// this will make <div id="box"> resizable() and draggable()
$('#box').resizable().parent().draggable();

// same but slightly safer since it checks parent's class
$('#box').resizable().parent('.ui-wrapper').draggable();

【讨论】：

感谢您的帮助。但是，您的修复对我不起作用。不过，我很可能会错误地应用它。我遇到的问题是，如果我的鼠标速度过快，一旦我将鼠标悬停在 iframe 上，拖动/调整大小就会停止，因为 iframe 会窃取焦点。【参考方案2】：

@aleemb：我不相信他在说什么。我认为问题出在 iframe 而不是可拖动和可调整大小的组合。

@regex：我也有同样的问题，而且它也体现在使用原型工具包的先前实现中。

我的实现使用 Iframe 作为画布，在其上放置可拖动对象。您可以看到该错误的方法是将鼠标移动得太快，以使光标离开可拖动 DIV 的边缘。 DIV 停止移动，鼠标继续移动；通过将鼠标移回 DIV 的表面，它会再次拾取 DIV 并开始移动，即使您已经释放了对鼠标的点击。

我怀疑 iframe 事件会以某种方式干扰 jquery 事件。

我的解决方案是在 Iframe 和可拖动/可调整大小之间放置一个透明的 DIV 标签。

通过这种方式，iframe 永远不会看到鼠标移动，因此不会干扰。

编辑：查看代码示例：http://dpaste.com/hold/17009/

韦斯

更新！我重新审视了这个问题，iframeFix 似乎在所有浏览器中都适用于可拖动对象，但可调整大小的对象没有等效的修复。

我用这段代码手动添加了一个蒙版DIV：

$elements.resizable( //mark it as resizable
    containment: "#docCanvas",
    start: function(event, ui) 
        //add a mask over the Iframe to prevent IE from stealing mouse events
        $j("#docCanvas").append("<div id=\"mask\" style=\"background-image:url(images/spacer.gif); position: absolute; z-index: 2; left: 0pt; top: 0pt; right: 0pt; bottom: 0pt;\"></div>");
    ,
    stop: function(event, ui) 
        //remove mask when dragging ends
        $j("#mask").remove();
    
);

还有 HTML：

<div id="docCanvas" style="position: relative;">
    <iframe src="something.html"></iframe>
</div>

spacer.gif 是一个 1x1 像素的透明 gif。

这解决了 IE7 和 IE8 的问题。 IE6 在 z-index 方面存在问题，并且似乎无法确定 DIV 应该位于 IFrame 和可调整大小的 DIV 之间。我放弃了 IE6。

韦斯

【讨论】：

我在网上找到了一个第三方脚本来帮助我，但是这个答案似乎也可以，所以我将它标记为答案。非常感谢！【参考方案3】：

我相信您也可以通过将“iframeFix”参数添加到可拖动初始化中来解决此问题，如“选项”下的文档中所述http://jqueryui.com/demos/draggable/

【讨论】：

【参考方案4】：

不幸的是，iframeFix 存在一个问题，即一旦可拖动透明 div 就很难释放。我之前写过另一个更强大的版本，但不幸的是我丢失了代码......如果我设法解决问题，我将重新发布我的代码。

编辑：好的，我制定了一个手册，但更好的方法......至少在我的情况下

当单击包含 div 时（onmousedown），您仍会在 iframe 容器的顶部创建一个透明 div。这个透明的 div 位于 top:-90%，这应该将它带到 iframe 上（取决于您的样式，它可能更像 top:-100%;）。在透明 div 的 onmouseupEvent 上，添加删除透明 div 的代码。

JSFUNCTIONS 函数coverIframes（） $(".normalWindow").append(""); 

function uncoverIframes() 
    $(".cover").remove();

透明 div 的 CSS 样式 div.cover 宽度：100%； 高度：100%； 最高：-90%； 位置：相对；

示例 HTML

【讨论】：

【参考方案5】：

试试这个

$('#Div').draggable( iframeFix: true );

这应该可以工作

http://docs.jquery.com/UI/API/1.8/Draggable

【讨论】：

【参考方案6】：

使用类似于@wes 建议的解决方案后，我找到了一个更简单的解决方案，不需要javascript 代码。只需将以下内容添加到您的 CSS 中：

.ui-resizable-resizing:after

    content: '';
    position: absolute; 
    z-index: 999; 
    left: 0px; 
    top: 0px; 
    right: 0px;
    bottom: 0px;

一旦用户开始调整大小，jQuery 会添加 .ui-resizable-resizing 类，并添加一个叠加层。请注意，您需要在调整大小的对象上使用“位置：相对”。

【讨论】：

对于拖动也有类似的修复：对 .ui-draggable-dragging 执行相同的操作

以上是关于如何使用jQuery Draggable和Droppable实现拖拽功能的主要内容，如果未能解决你的问题，请参考以下文章

draggable jquery get start parent（）元素

jQuery draggable : 只能在一个 droppable 上拖动

jquery on drop 函数不起作用

jQuery Drag＆Drop：拖动一个封闭元素

如何仅使用 Draggable 和 Droppable jQuery 从克隆中删除类？

使用 jQuery 删除拖动的元素并重置光标