仅在不拖动元素时获取输出

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

Draggables具有选项，允许您将功能与拖动的开始和停止相关联。 （请参阅http://api.jquery.com/ ，单击顶部的jQuery UI以获取文档）。 因此，您可以使用它，并且可能有一个全局布尔值，该值在拖动开始时设置，而在拖动结束时取消设置。 让您的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代替了req（）本身。 将超时设置为全局，并具有启动/停止功能以清除/设置超时。

Answer 2

也许您可以将其与mouseup事件mouseup ？

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

与其将可拖动对象直接与AJAX调用相关联，不如将它与一个触发器相关联，您可以使用该触发器来激活mouseleave 。

Answer 3

您甚至可以进一步了解kbosak的想法：

var req = function () {
...

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

换句话说，创建一个在拖动停止时调用函数“ req”的可拖动对象。

另外，您也可以用更标准的形式完全重写它：

function req () {
...

这将是完全相同的事情。 另外，您可以执行以下操作：

$(function() {

代替：

$(document).ready(function() {

您可以合并两个可拖动的呼叫。 所以...如果我正在编写它，则最终代码将是：

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();
});