0

最初の実行時にドラッグ可能なメッセージ ボックスを作成しました。次のコードは、ユーザーが特定の子 div にカーソルを合わせてテキストをコピーするときに、ドラッグ可能な親 div をドラッグ不可にすることになっています。これは、jQuery を介して正常に実行されます。このコードは、ドラッグ不可の親ノードを再びドラッグ可能にすることも想定しています。しかし、何らかの理由で失敗します。私はSafariコンソールのデバッグを試み、段階的に実行されたようにJavaScriptコードに従いました。クラス名「messageBoxDescriptionBar」の div にカーソルを合わせると、クラス名「messageBox」の親 div はドラッグ不可になり、draggableOff 関数がトリガーされます。しかし、draggableOn 関数がトリガーされ、条件が true であるにもかかわらず、親ノードにカーソルを合わせると、内部のコードが実行され、関数は要素を再びドラッグ可能にしようとします。しかし、その結果、最初の実行時のように、マッサージ ボックスを再びドラッグすることはできなくなります。なぜ？私は何を間違っていますか？ノードの選択が間違っていますか? クラス名で選択してみましたが、結果は変わりませんでした。

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

OK、間違いに気づきました。マウス ホバー イベントがトリガーされたときに、ドラッグのオンとオフを切り替える 2 つの関数を宣言する必要はありません。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 に答える