SORU
20 NİSAN 2011, ÇARŞAMBA


Bir sürüklenebilir geri dönmek jQuery droppable dışında olay orijinal kabına nesne

Droppable bir geri düştü değilse hangi sürüklenebilir bir madde var. Bu bir kullanıcı droppable bir öğe damla kadar iyi çalışıyor. Eğer her zaman hata yaptıklarını karar verirseniz onlar droppable döner dışarı sürüklenebilir çekiyorlar. Ve devre dışı bırakmak sürüklenebilir özgün kabına gider tercih ederim.

Benim kod ama a sample on jsFiddle sağladım altındadır.

HTML

<div id="origin">
    <div id="draggable" class="ui-widget-content">
        <p>I revert when I'm not dropped</p>
    </div>
</div>
<div id="droppable" class="ui-widget-header">
    <p>Drop me here</p>
</div>

JavaScript

$(function() {
    $("#draggable").draggable({ 
        revert:  function(dropped) {
           var dropped = dropped && dropped[0].id == "droppable";
           if(!dropped) alert("I'm reverting!");
           return !dropped;
        } 
    }).each(function() {
        var top = $(this).position().top;
        var left = $(this).position().left;
        $(this).data('orgTop', top);
        $(this).data('orgLeft', left);
    });

    $("#droppable").droppable({
        activeClass: 'ui-state-hover',
        hoverClass: 'ui-state-active',
        drop: function(event, ui) {
            $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
        },
        out: function(event, ui) {
                // doesn't work but something like this
                ui.draggable.mouseup(function () {
                var top = ui.draggable.data('orgTop');
                var left = ui.draggable.data('orgLeft');
                ui.position = { top: top, left: left };
            });
        }
    });
});

CEVAP
1 Mayıs 2011, Pazar


$(function() {
    $("#draggable").draggable({
        revert : function(event, ui) {
            // on older version of jQuery use "draggable"
            // $(this).data("draggable")
            // on 2.x versions of jQuery use "ui-draggable"
            // $(this).data("ui-draggable")
            $(this).data("uiDraggable").originalPosition = {
                top : 0,
                left : 0
            };
            // return boolean
            return !event;
            // that evaluate like this:
            // return event !== false ? false : true;
        }
    });
    $("#droppable").droppable();
});

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • BeginnersTech

    BeginnersTec

    8 NİSAN 2011
  • sonia989

    sonia989

    26 EKİM 2006
  • TotalxLuna

    TotalxLuna

    27 Kasım 2011