要素がドラッグされていないときにのみ出力をフェッチする

Question

要素がドラッグされているときに、その要素が解放されるまでスクリプトが出力ファイルの取得を停止するように、

$(document).ready(function() { 
    //$(".draggable").draggable(); 
    $(".draggable").draggable({ containment: '#container', scroll: false }); 
    $(".draggable").draggable({ stack: { group: '#container', min: 1 } }); 

    $("*", document.body).click(function (e) { 
     var offset = $(this).offset();// get the offsets of the selected div 
     e.stopPropagation(); 
     var theId = $(this).attr('id');// get the id of the selceted div 
     $("#result").text(this.tagName + " id=" + theId + " (" + offset.left + "," + offset.top +")"); 
     //post x,y to php (and the id of the elemnt) 
     $.post("http://localhost/index.php", "id=" + theId + "&x=" + offset.left + "&y=" + offset.top); 
    }); 

    var req = function() { 
     $.ajax({ 
      url: "out.php", 
      cache: false, 
      success: function(html){ 
       $("#stuff").empty().append(html); 
       var css_attr = html.split(","); 
       $('#1').css('left', css_attr[0] + 'px').css('top', css_attr[1] + 'px'); 
      }, 
      complete: function(){ 
       req(); 
      } 
      }); 
    }; 
    req(); 
}); 

注：このスクリプトは、次のJavaScriptのソースに依存しています。

jquery.js 
http://jqueryui.com/latest/ui/ui.core.js 
http://jqueryui.com/latest/ui/ui.draggable.js 
http://jqueryui.com/latest/ui/ui.droppable.js 

ものは何でもできます...ありがとう。

Answer 1

多分、mouseupイベントに関連付けることはできますか？

http://docs.jquery.com/Events/mouseup#fn

代わりのAJAX呼び出しを直接ドラッグ可能なオブジェクトを関連付ける、あなたはmouseleaveをアクティブにするために使用することができ、トリガーに関連付けます。

Answer 2

Draggablesには、ドラッグの開始と停止に関数を関連付けるオプションがあります。 （http://api.jquery.com/を参照し、ドキュメントの上部にあるjQuery UIをクリックしてください）。だからあなたはそれを使うことができ、ドラッグが開始されたときにセットされ、ドラッグが終了したときにアンセットされるグローバルブール値を持つことができます。あなたのreq（）関数がこのブール値をチェックし、設定されていれば終了します。代わりにREQを持つの

まだ

var halt_request = 0; 

$(".draggable").draggable({ 
    containment: '#container', 
    scroll: false, 
    start: function(){ halt_request = 1; }, 
    stop: function(){ halt_request = 0; } 
}); 

... 

var req = function() { 
    if (halt_request) { 
     sleep(10); // so you're not looping too quickly 
     req(); 
     return; 
    } 

    $.ajax({ 
     url: "out.php", 
... 

、より良い、（）それはsetTimeoutメソッドを使用している、自分自身を呼び出す：ような何か。タイムアウトをグローバルにして、開始/停止機能でタイムアウトをクリア/設定します。

Answer 3

あなたも少しさらにkbosakのアイデアを取ることができます。つまり

var req = function() { 
... 

$(".draggable").draggable({ 
    containment: '#container', 
    scroll: false, 
    stop: req 
}); 

を、停止をドラッグすると、「REQ」関数を呼び出しドラッグを作成します。

function req() { 
... 

をし、それがまったく同じことになります。

また、あなたはまた、完全に、より標準的な形式でこれを書き換えることができます。また、あなたが行うことができます：

$(function() { 

の代わり：

$(document).ready(function() { 

を、あなたはあなたの2つのドラッグ可能な通話をマージすることができます。私はそれを書いていたのであれば...、最終的なコードは次のようになります。

function req() { 
    ...*insert code for req here*... 
}; 

$(function() { 
    $(".draggable").draggable({ 
     containment: '#container', 
     scroll: false, 
     stack: { group: '#container', min: 1 }, 
     stop: req 
    }); 
    $("*", document.body).click(function (e) { 
     var offset = $(this).offset();// get the offsets of the selected div 
     e.stopPropagation(); 
     var theId = $(this).attr('id');// get the id of the selceted div 
     $("#result").text(this.tagName + " id=" + theId + " (" + offset.left + "," + offset.top +")"); 
     //post x,y to php (and the id of the elemnt) 
     $.post("http://localhost/index.php", "id=" + theId + "&x=" + offset.left + "&y=" + offset.top); 
    }); 

    req(); 
});