2

基本的に私が望むのは、ドラッグ中に封じ込め領域の外に出てマウスのクリックを放すと、ドラッグ可能な要素が封じ込め領域を離れた場所の境界線にくっつくことです。カーソルを元に戻すと、要素がカーソルに戻ります。カーソルを動かしているだけで（ドラッグしていない）、要素がまだドラッグされているときは見栄えがよくありません。

ここで遊ぶためのフィドルです。出力領域の外にカーソルをドラッグして放すだけで、私が話していることが得られます。

2つの方法を考えていました

  1. ドラッグ中のマウスの動きをコンテインメント エリアに制限します (検索しても方法が見つかりませんでした。おそらくそれは不可能でしょうか?)

  2. カーソルが格納領域から離れた場合は、ドラッグ可能オブジェクトを元の位置に戻します。（まだこれを行う方法を見つけることができませんでした）

これを達成するための方法またはより明るいアイデア???

Relevant Code(スタックオーバーフロー用)

4

2 に答える 2

1

iframeにあるからだと思います。ブラウザの外にドラッグするようなものです。mouseupイベントはページに登録されません。

Chromeはそれを許可していないようですが、Firefoxは許可しています。

これを試してください： フィドル

$('body').mouseleave(function()
    {
    $(document).trigger("mouseup");
    });

毎回イベントを設定せずに解決できます。

オーバーキルバージョン（これにより、ユーザーは一時的に（1秒）iframeを離れ、ドラッグを失うことなく戻ることができます）：

$('body').prop('mouseuptimer',null)
    .mouseleave(function()
        {
        var objTimer = setTimeout(function() 
            {
            $(document).trigger("mouseup")
            }, 1000);
        $(document).prop('mouseuptimer', objTimer);
        })
    .mouseenter(function()
        {
        var objTimer = $(document).prop('mouseuptimer');
        if (objTimer) clearTimeout(objTimer);
        });
$(function() 
    {
    $( "#sortable" ).sortable({revert: true });
    $( "#draggable" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid" });
    $( "ul, li" ).disableSelection();
    });

編集：

最初の質問に答えるには：

オプションに「封じ込め」を追加することにより、ドラッグ可能なものを含めることができます。

$( "#draggable" ).draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid",
    containment: "document" });

ただし、これにはバウンディングボックス（この場合は「ドキュメント」）にドラッグされた要素のみを含めることができますが、「親」または「#somediv」の場合もあります。マウスカーソルは引き続きiframeの外に移動し、iframeドキュメントの範囲を超えてそこからイベントをディスパッチできます。

于 2013-02-01T11:52:33.930 に答える
0

わかりました、これの回避策を見つけました。IE8とChromeで動作します。

ドラッグ可能な要素にこのコードを追加しました。

drag: function(){
     $('body').mouseleave(function(){
          $('body').mouseup();
     });
}

ワーキングフィドル

編集：欠陥を指摘してくれたRembunatorのおかげで、パフォーマンスを向上させるために.one（）を使用し、コードをドラッグから開始にシフトすることにしました

start: function(){
     $('body').one("mouseleave", function(){
          $('body').mouseup();
     });
}

編集2：

ついにそれに対する解決策を見つけました。

コードは次のとおりです。

var flag=true;
start: function( event, ui ){
    if(flag){
         flag = false;
         $('body').one("mouseleave", function(){
             $('body').mouseup();
              flag = true; //event occured, rebind
          });
     }
     else{
         flag = false;
     }
}

Rembunatorの助けに感謝します

于 2013-02-01T13:31:00.653 に答える