0

我创建了一个在初始运行时可拖动的消息框。以下代码应该使可拖动的父 div 不可拖动，当用户将鼠标悬停在某个子 div 上以复制文本时，这是通过 jQuery 成功完成的。该代码还应该使不可拖动的父节点再次可拖动。但由于某些原因是失败的。我尝试了 Safari 控制台调试，并按照 javascript 代码一步一步地运行。当我将鼠标悬停在类名为“messageBoxDescriptionBar”的 div 上时，类名为“messageBox”的父 div 变得不可拖动，并且触发了 draggableOff 函数。但是当我将鼠标悬停在父节点上时，虽然触发了draggableOn函数，并且条件为真，并且执行了里面的代码并且该函数试图再次使元素可拖动，但结果是按摩框不再像最初运行时那样可拖动。为什么？我究竟做错了什么？我是否错误地选择了节点？我尝试按类名选择它，但结果没有改变。

function draggableOff(selector) {
var fv__isDraggable = new Boolean;
fv__isDraggable = $(selector).hasClass('ui-draggable');
if(fv__isDraggable) {
    $(function() {
        $(selector).draggable('destroy');
    });
}
}
function draggableOn(selector) {
var fv__isDraggable = new Boolean;
fv__isDraggable = $(selector).hasClass('ui-draggable');
if(!fv__isDraggable) {
    $(function() {
        $(selector).draggable();
    });
}
}
<div style="margin-left: 768px; margin-top: 249px;" onmouseover="draggableOn(this.Node);" class="messageBox messageBoxShaddow ui-draggable">
<div class="messageBoxTitleBar noSelectionNoCursor">Error! Invalid coordinates.</div>
<div class="messageBoxMessageBar noSelectionNoCursor" style="color: red;">
<p> x should be a number.</p>
<p> valid x range is between 0-4.</p>
<p>  y should be within map limits.</p>
<p> maximum y allowed is 4.</p></div>
<div onclick="removeNode(this.parentNode);" class="messageBoxButton noSelectionNoCursor">OK</div>
<div onclick="displayNode(this.parentNode.lastChild);" class="messageBoxButton noSelectionNoCursor">Details...</div>
<div onmouseover="draggableOff(this.parentNode);" class="messageBoxDescriptionBar">
<p> 2 errors has happened:</p>
<p> x coordinate is not a number.</p>
<p> y coordinate exceeds map limits.</p></div></div>
4

1 回答 1

0

好的，我发现我的错误，当触发鼠标悬停事件时，不需要声明两个函数来打开和关闭拖动。jQuery UI 已经通过Draggable Handles具有该功能。可以仅通过定义“句柄”来使项目可拖动，或者通过定义“取消”来阻止项目被拖动。所以正确的做法是使用：

$(function() {
    $(selector).draggable({ cancel: 'selector supposed to stop drag functionality' });
});

$(function() {
    $('selector').draggable({ handle: 'selector supposed to start drag functionality' });
});

因此，我将上面的代码编辑为以下内容，并且一切正常：

<script>
    $(function() {
        $('.messageBox').draggable({ cancel: '.messageBoxDescriptionBar' });
    });
</script>
<div style="margin-left: 768px; margin-top: 249px;" class="messageBox messageBoxShaddow ui-draggable">
<div class="messageBoxTitleBar noSelectionNoCursor">Error! Invalid coordinates.</div>
<div class="messageBoxMessageBar noSelectionNoCursor" style="color: red;">
<p> x should be a number.</p>
<p> valid x range is between 0-4.</p>
<p>  y should be within map limits.</p>
<p> maximum y allowed is 4.</p></div>
<div onclick="removeNode(this.parentNode);" class="messageBoxButton noSelectionNoCursor">OK</div>
<div onclick="displayNode(this.parentNode.lastChild);" class="messageBoxButton noSelectionNoCursor">Details...</div>
<div class="messageBoxDescriptionBar">
<p> 2 errors has happened:</p>
<p> x coordinate is not a number.</p>
<p> y coordinate exceeds map limits.</p></div></div>
于 2013-06-29T21:43:19.083 回答