Получать только вывод, когда элемент не перетаскивается

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",
...

И, что еще лучше, вместо того, чтобы вызывать саму функцию req (), используйте метод setTimeout. Установите время ожидания как глобальное, а функции запуска / останова очистите / установите время ожидания.

Answer 2

Вы даже можете продвинуть идею Кбосака немного дальше:

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

Answer 3

Может быть, вы можете связать его с событием mouseup?

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

Вместо того чтобы связывать перетаскиваемый объект напрямую с вызовом AJAX, свяжите его с триггером, который вы можете использовать для активации mouseleave.