需要想法来避免可拖动的 jqueryui 问题答案

【问题标题】：Need ideas to avoid draggable jqueryui issue需要想法来避免可拖动的 jqueryui 问题
【发布时间】：2014-03-11 04:37:58
【问题描述】：

两个程序：

-one 有一个可拖动的 div，里面有一个 iframe。

<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />

<script>
$(function() {
    $( "#draggable" ).draggable();
});
</script>

<style>
#draggable { width: 1500px; height: 300px; }
</style>

</head>

<body>
    <div id="draggable" class="ui-widget-content" style="background:#ccc">
        <p>Drag me around</p>
        <iframe src="test.php" style="background:#eee;width:100%;height:240px;" frameborder='0' ></iframe>
    </div>
</body>

-另一个，iframe程序

<body>
<div onclick="alert('Clicked here')">Just a test with an input</div>
<input type="text" id="txtid">
</body>

场景：我在 div 内点击鼠标按钮开始拖动，然后将鼠标从 div 快速拖动到 iframe 内。我失去了可拖动的能力（没关系，我可以带着这个离开）。但是随后，我松开鼠标按钮并将其移出 iframe...一旦鼠标触摸 div repeat: without the mouse button press，拖动将保持活动状态.

这是拖动方法的错误还是功能？如何强制停止拖动行为？如果你尝试一下，你会发现这是一个非常烦人的行为。

TIA，

【问题讨论】：

标签： javascript jquery html jquery-ui iframe

【解决方案1】：

iframe 上的任何鼠标事件都可能不会冒泡到父文档。基本上，当您释放鼠标按钮时，该事件永远不会返回到可拖动处理程序 - 它无法知道您不再按下鼠标按钮。

您可以在拖动时使用可拖动的“助手”选项将 iframe 替换为占位符 div - 或者，您可以在拖动时用透明覆盖覆盖 iframe。

【讨论】：

感谢您的回复。我没有听说过助手；生病尝试但没有成功。但这让我想到了另一个选择：iframeFix，这看起来就是我需要的。
遗憾的是，iframeFix 在另一个 iframe 上时会锁定元素的 click 属性。还在研究中……