jQuery ziehbare + dropable: wie Drop Element auf Drop-on-Element

Question

Ich habe meinen Bildschirm in zwei DIV s unterteilt. In der linken DIV habe ich ein paar 50x50 Pixel DIV s, in der rechten DIV habe ich ein leeres Raster aus 80x80 LI s gemacht. Die DIV s auf der linken Seite sind ziehbar, und einmal auf eine LI fallen gelassen, sollten sie in der Mitte dieser LI schnappen.

Klingt einfach, oder? Ich weiß einfach nicht, wie ich das schaffen soll. Ich habe versucht, indem Sie die fallengelassen DIVund left CSS-Eigenschaften, um mit denen der LI sie fallen gefallen sind, aber die left und top Eigenschaften sind relativ zu der linken DIV.

Wie kann ich das Drop-Element am besten in die Mitte des Elementes einrasten lassen? Das muss einfach sein, oder?

Bearbeiten: Ich benutze jQuery UI 1.7.2 mit jQuery 1.3.2.

Edit 2: Denn wer anderes hat dieses Problem, das ist, wie ich es fest:

I Keith-Lösung verwendet, um das gezogene Element zu entfernen und es in dem Element in dem drop Rückruf von über abgesenkte-Platzierung die abwerfbaren Plugin:

function gallerySnap(droppedOn, droppedElement) 
{ 
    $(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>'); 
    $(droppedElement).remove(); 
} 

ich nicht das abgelegte Element wieder tun zu werden ziehbar, aber wenn Sie das tun, binden nur ziehbar, um es wieder.

Für mich löste diese Methode auch das Problem, das ich hatte, wenn ich die gefallenen Elemente positionierte (was relativ zu der linken DIV wäre) und innerhalb der zweiten DIV scrollte. (Elemente bleiben auf der Seite fixiert, jetzt scrollen sie weiter).

Ich habe mit den Fangoptionen gespielt, damit es beim Ziehen gut aussieht, also danke an karim79 für diesen Vorschlag.

Ich werde wahrscheinlich keine Awesome Code Preise gewinnen, also, wenn Sie Raum für Verbesserungen sehen, bitte teilen!

Answer 1

Ich hatte ein ähnliches Problem - ich um es funktionierte durch manuell das gezogene Element von seiner alten Eltern zu entfernen und auf die fiel auf Element hinzugefügt wird .

Answer 2

Wenn die div s auf der linken Seite sind tatsächlich in den li s auf der rechten Seite (die Sie mit Firebug bestätigen können), und wenn die li s alle in einem ul sind (wie sie sein sollten), versuchen, eine oder beide der folgenden:

ul#right_div { 
    text-align: center; 
} 

ul#right_div li { 
    text-align: center; 
} 

Answer 3

fand ich, dass, wenn Sie die Drag tun, jQuery UI ein Inline fügt Ihnen sagen, wo man sie fallen gelassen. Unten ist ein Beispiel des Codes, die ich es einrasten verwendet

$('.droppable').droppable({ drop: function(ev, ui) { 
    //Get Details of dragged and dropped 
    var draggedclass = ui.draggable.attr('class'), 
     droppedclass = 'class' + $(this).attr('name').toLowerCase(); 

    //update the classes so that it looks od.  
    ui.draggable.removeClass(draggedclass).addClass(droppedclass); 
    ui.draggable.removeAttr('style'); 
}); 

Answer 4

Danke für Ihren Beitrag - es hat mir in die richtige Richtung geholfen. Ich finde es etwas sauberer, die Positionseigenschaften des ziehbaren Objekts zu setzen, anstatt mit dem HTML-Code herumzuspielen. Dadurch wird die Position in der oberen linken Ecke des Objekts droppable festgelegt, Sie können jedoch auch so ändern, dass sie zentriert wird.

drop: function(event, ui) { 
    $(ui.draggable).css('top', $(this).position().top); 
    $(ui.draggable).css('left', $(this).position().left); 
} 

Answer 5

$("form li").draggable({snap:'.ui-droppable', snapMode:'inner', revert:true}); 
$('.drop').droppable({drop:function(ev, ui) 
          {$(ui.draggable).appendTo($(this)) 
              .css({position:'static', left:'0px', top:'0px'}) 
              .draggable('option', 'disabled', false) 
              .css({position:'relative'}); 
          } 
        } 
        ); 

Answer 6

Ich fand, dass Keith Methode für mich gearbeitet. Seit seiner Antwort nicht eine Beispielimplementierung umfassen werde ich meine Post:

$('.dropTarget').droppable({ 
    drop: function(ev, ui) { 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 
    } 
}); 

oder, etwas prägnanter:

$('.dropTarget').droppable({ 
    drop: function(ev, ui) { 
     $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this); 
    } 
}); 

Answer 7

basierend auf Barrys Code, was passiert, wenn wir eine hinzufügen möchten Option mit einem "x" Knopf das Element, das wieder von dem neuen Elternteil gelöst werden soll und wieder an das ursprüngliche Elternteil angefügt werden soll?

ich so dachte, etw, aber zu arbeiten schien nicht .. irgendeine Art einer Variablen zu machen, die

var flag; 
$('.draggable-div').draggable({ 
    revert: 'invalid', 
    stop: function(){ 
     $(this).draggable('option','revert','invalid'); 
     $(this).find('.undo').show(); 
    flag=$(this).parent(); 
    } 
}); 


$('.draggable-div').find('.undo').click(function(i, e) { 
    var $div = $(this).parent(); 
$($div).detach().appendTo(flag); 
} 

etw Anfangszustand halten ist definitiv falsch, aber ich weiß nicht, ob Sie kann das Konzept ... nur in der Lage sein, umzukehren, was auch immer Sie in ihren Ausgangszustand fallen gelassen haben.