Question

我创建了一个在初始运行时可拖动的消息框。当用户在某个子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>

Answer 1

好的，我弄清楚了我的错误，当触发鼠标悬停事件时，没有必要声明两个函数来打开和关闭拖动。 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>

如何通过jQuery中的子句柄制作/取消可拖动的元素？

1 个答案: