2010-04-12 12 views
5

Używam jQuery UI i jQuery draggable, wszystkie moje draggables użyć jQuery klon pomocnika i dołącza przeciągany do droppable.jQuery Draggables i Droppables Pozycjonowanie

Oto mój kod

$('#squeezePage #droppable').droppable({ 
    tolerance: 'fit', 
    accept: '#squeezeWidgets .squeezeWidget', 
    drop: function(event, ui) { 
    var dropElem = ui.draggable.html(); 

    var clone = $(dropElem).clone(); 

    clone.css('position', 'absolute'); 
    clone.css('top', ui.absolutePosition.top); 
    clone.css('left', ui.absolutePosition.left); 

    $(this).append(clone); 

    $(this).find('.top').remove(); 
    $(this).find('.widgetContent').slideDown('fast'); 

    $(this).find('.widgetContent').draggable({ 
    containment: '#squeezePage #droppable', 
    cursor: 'crosshair', 
    grid: [20, 20], 
    scroll: true, 
    snap: true, 
    snapMode: 'outer', 
    refreshPositions: true 
    }); 

    $(this).find('.widgetContent').resizable({ 
    maxWidth: 560, 
    minHeight: 60, 
    minWidth: 180, 
    grid: 20, 
    }); 
    } 
}); 

ja ustawiania położenia klonu z .css('top', ui.absolutePosition.top); i css('left', ui.absolutePosition.left); ale pozycja jest w stosunku do ciała.

Pozycja nie jest względna w stosunku do droppable, która powoduje, że przeciągany spadek trafia do przypadkowych miejsc. Ogólnie rzecz biorąc, zrzucana i łatwa integracja nie jest napięta. Chcę, żeby był gładszy.

Odpowiedz

10

Dostaję przesunięcie ciała i odejmuję je od przesunięcia klonu widgetu.

 clone.css('top', ui.position.top - droppableOffset.top); 
     clone.css('left', ui.position.left - droppableOffset.left); 

Działa!

+1

gdzie zmienna droppableOffset to jQuery ('# squeezePage #droppable'). Offset(); – Haris

+0

Spędziłem tak wiele godzin szukając podobnego rozwiązania .. dziękuję bardzo. –

Powiązane problemy