JQuery -> Drag & Drop

02/02/2017 14:08 .Barone#1
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)
02/02/2017 17:34 Mozo_#2
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. ( [Only registered and activated users can see links. Click Here To Register...] )

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'); 
02/02/2017 19:20 .Barone#3
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...
02/02/2017 23:42 #Metho#4
Quote:
Originally Posted by .Barone View Post
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:

[Only registered and activated users can see links. Click Here To Register...]

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.
02/03/2017 14:58 Mozo_#5
Quote:
Originally Posted by .Barone View Post
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 :)
[Only registered and activated users can see links. Click Here To Register...]
02/03/2017 15:12 #Metho#6
Quote:
Originally Posted by Mozo_ View Post
Hier ist einmal ein Fiddle von meinem Beispiel :)
[Only registered and activated users can see links. Click Here To Register...]
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.
02/03/2017 18:21 .Barone#7
@#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.