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

也许您可以将其与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();
});

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

3 个答案: