Eleman sürüklenen değil yalnızca çıktı almak

3 Cevap php

Nasıl ki aşağıda kodunu değiştirmek verebilecek eleman serbest bırakılıncaya kadar bir unsur komut çıktı dosyasını getiriliyor duracaktır sürüklenen ediliyor alıyorsunuz?

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

Not: Bu komut aşağıdaki JavaScript kaynaklara bağlıdır:

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

Her şey ... Teşekkürler yardımcı olur.

3 Cevap

Draggables Eğer sürükle başlangıç ​​ve stop fonksiyonları ilişkilendirmek için izin seçenekleri vardır. (http://api.jquery.com/, dokümanlar için üstündeki jQuery UI tıklayınız). Yani bu kullanabilir ve belki sürükle sürükle başlar ve unset biter ne zaman set alır global boolean var. Bu ayarlanır eğer req () fonksiyonu bu boolean ve çıkış kontrol var. Gibi bir şey:

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

Ve daha iyisi, yerine gön sahip () kendisini aramak, bu setTimeout kullanmak zorunda. Küresel olarak zaman aşımı var ve başlangıç ​​var / durdurma fonksiyonları açık / zaman aşımını ayarlayın.

Hatta biraz daha kbosak fikrini alabilir:

var req = function () {
...

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

Diğer bir deyişle, durur sürüklerken işlevi "req" çağıran bir sürüklenebilir oluşturun.

Ayrıca, aynı zamanda tamamen bir daha standart formda bu yazabilirsiniz:

function req () {
...

ve aynı şey olacak. Ayrıca, bunu yapabilirsiniz:

$(function() {

yerine:

$(document).ready(function() {

ve size iki sürüklenebilir aramaları birleştirebilirsiniz. Onu yazma olsaydı Yani ..., son kodu olacaktır:

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

Belki mouseup olay ile ilişkilendirmek?

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

Bunun yerine AJAX çağrısı ile doğrudan sürüklenebilir nesneyi ilişkilendirerek, size mouseleave etkinleştirmek için kullanabileceğiniz bir tetikleyici ile ilişkilendirmek.

etiketler