JQuery -> Drag & Drop

[.Barone]

Hallo epvpl'er.
Ich versuche gerade das Drag & Drop System von Jquery zu nutzen.
Das gelingt mir soweit auch problemlos, jedoch würde ich gerne folgendes machen:
Wenn der User den Content aus einem Slot nimmt, dann sollen die daten des Content's genommen werden und in dem neuen slot gespeichert werden:
Momentan sieht das so aus:

PHP Code:

$(function(){

        $(".content-image").draggable({ snap: ".slot"});
        $(".content-image").draggable({
            drag: function(event,ui){
                var start_slot = this.parentNode.getAttribute('id');
                var start_content= this.getAttribute('data-contentid');
                console.log('Start-Slot:'+start_slot+' Start-content: '+start_content);
            }
        });
        $(".slot").droppable({
            drop: function (event,ui) {
                var end_slot = event.target.attributes.id.value;
                var end_content= this.getAttribute('data-contentid');
                console.log('End-Slot:'+end_slot+' End-content: '+end_content+ 'Start-Slot:'+start_slot+' Start-content: '+start_content);
                $(this).addClass("ui-state-highlight");
               $(".popover").popover("dispose");
            }
        });
    }); 


Bei dem Drag hole ich die Info's vom Content, welchen der User draggt.
Beim Drop hole ich die Info's vom Content, wo der Content gedroppt wurde.
Jedoch ists so, wie es jetzt ist, nicht möglich die Drag-Daten(Start_slot und start_content) in der Drag-funktion zu nutzen. Da ich gerne überprüfen würde, ob der Content, den er auch draggt, existiert (per $_post + datenbank abfrage)

[Mozo_]

Hey,

hier:

PHP Code:

$(".slot").droppable({
            drop: function (event,ui) {
                var end_slot = event.target.attributes.id.value;
                var end_content= this.getAttribute('data-contentid');
                console.log('End-Slot:'+end_slot+' End-content: '+end_content+ 'Start-Slot:'+start_slot+' Start-content: '+start_content);
                $(this).addClass("ui-state-highlight");
               $(".popover").popover("dispose");
            }
        }); 


hast du ja bereits "event" und "ui" als variablen der Drop Funktion, wenn du nun die variable ui anschaust, hast du dort verschiedene daten zu dem gedropten element gespeichert. ( )

Mit

PHP Code:

console.log($(ui.draggable.context).html()); 


würdest du z.b. den HTML content von dem gedropten element bekommen, wenn du aber wie in deinem beispiel an das data attribut ran möchtest, kannst du es einfach so aufrufen:

PHP Code:

var start_slot = $(ui.draggable.context).attr('id');
var start_content = $(ui.draggable.context).data('contentid'); 


[.Barone]

Wenn ich es versuche so umzusetzen wie du es schreibst, dann bekomme ich immer ein undefined.

PHP Code:

console.log($(ui.draggable.context).html()); 


PHP Code:

console.log($(ui.draggable.context)); 


Sind beide undefined.

Auch wenn ich versuche an das Parent ran zu kommen, wird mir nen undefined ausgespuckt. Das Object ist jedoch laut Firefox vorhanden...

[#Metho]

Originally Posted by .Barone

Wenn ich es versuche so umzusetzen wie du es schreibst, dann bekomme ich immer ein undefined.

PHP Code:

console.log($(ui.draggable.context).html()); 


PHP Code:

console.log($(ui.draggable.context)); 


Sind beide undefined.

Auch wenn ich versuche an das Parent ran zu kommen, wird mir nen undefined ausgespuckt. Das Object ist jedoch laut Firefox vorhanden...

Ich habe dir hierzu ein einfaches Beispiel gemacht:

PHP Code:

$(document).ready(function() {

    $('#draggable').draggable({
        snap: '.slot'
    });
    
    $('#draggable').draggable({
        start: function(event, ui) {
            var draggableElement = this;
            console.log('#draggable => startSlot: ' + draggableElement.parentElement.id);
            console.log('#draggable => startContent: ' + draggableElement.dataset.contentid);
        }
    });
    
    $('#droppable').droppable({
        drop: function(event, ui) {
            var draggableElement = ui.draggable.context;
            console.log('#droppable => startSlot: ' + draggableElement.parentElement.id);
            console.log('#droppable => startContent: ' + draggableElement.dataset.contentid);
        }
    });
    
}); 


edit: Ich habe dir das Resultat in die Variabel draggableElement gespeichert. Du solltest besser parentElement.id / dataset.contentid verwenden ist schneller und präziser/sauberer.

Ich habe ebenfalls die Methode drop durch start ersetzt. Der Unterschied ist, dass start nur einmal ausgeführt wird und drag immer, solange du das Element mit der Maustaste hältst.

[Mozo_]

Originally Posted by .Barone

Wenn ich es versuche so umzusetzen wie du es schreibst, dann bekomme ich immer ein undefined.

PHP Code:

console.log($(ui.draggable.context).html()); 


PHP Code:

console.log($(ui.draggable.context)); 


Sind beide undefined.

Auch wenn ich versuche an das Parent ran zu kommen, wird mir nen undefined ausgespuckt. Das Object ist jedoch laut Firefox vorhanden...

Hier ist einmal ein Fiddle von meinem Beispiel

[#Metho]

Originally Posted by Mozo_

Hier ist einmal ein Fiddle von meinem Beispiel

Wenn du's per jQuery machen möchtest, dann brauchst du keine Umwandlung von einem HTMLElementObject in ein jQueryObject, da ui.draggable bereits ein jQueryObject ist:

Das:

PHP Code:

$(ui.draggable.context) 


ist gleich:

PHP Code:

ui.draggable 


Aber mit der Kernaussage hast du recht, er braucht entweder nur die stop-Methode vom draggable-Element oder die drop-Methode vom droppable-Element, so wie das Projekt vom TE beschrieben wurde.

[.Barone]

@#metho
Danke. Das funktioniert so wunderbar. Jetzt noch die sachen per POST an den Handler der dann alles in die Datenbank einträgt und dann sollte alles passen.