jQuery - Attributwert nach erfolgreichem Drag & Drop ändern

Question

Nach erfolgreichem Drag & Drop eines DIV (Person NT, TVD, LZ oder JVR) in eine Position DIV, möchte ich, dass der Attributwert "daten-id "wird aktualisiert und in der MySQL-Datenbank gespeichert. Wie kann ich das schaffen? Ich stecke fest.

Die Datenbank hat die folgenden Spalten: ID, Name, IMG, Position. Ich möchte die Position schreiben (welcher Wert ist "Daten-ID"), um gespeichert zu werden.

Live-Demo: planning.dutch-quality.nl

$(function() { 
    $(".boxPersons").each(function(e) { 
    var target = $(this).attr("data-id"); 
    $("#" + target).append($(this)); 
    }); 

    $(".boxPersons").draggable({ 
    revert: 'invalid', 
    containment: '.box', 
    cursor: 'move' 
    }); 

    $(".openSpots, .box-persons").droppable({ 
    accept: ".boxPersons", 
    drop: function(event, ui) { 
     var droppable = $(this); 
     var draggable = ui.draggable; 

     // Move draggable into droppable 
     draggable.appendTo(droppable); 
     draggable.css({ 
     top: '0px', 
     left: '0px' 
     }); 
    } 
    }); 
}); 

Answer 1

Haben Sie einen Versuch dieser

$(function() { 
 
    $("#dragMe").draggable(); 
 
    $("#dropOnMe").droppable({ 
 
    drop: function(event, ui) { 
 
     var $uiElement = $(ui.draggable), 
 
      id   = $uiElement.attr("id"), 
 
      dataid  = $uiElement.attr("data-id"), 
 
      dropid  = $(this).attr("data-id"); 
 
     console.log(id,dataid,dropid); 
 
     $.post("someUrl",{id:id,dataid:dataid},function() { 
 
     console.log("updated"); 
 
     }); 
 
     
 
     $(this) 
 
     .addClass("ui-state-highlight") 
 
     .find("p") 
 
     .html(dataid+" Dropped!"); 
 
     $uiElement.attr("data-id",dropid).text("dropped on "+dropid); // set the dataid on the dragged 
 
    } 
 
    }); 
 
});

#dragMe { 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 0.5em; 
 
    float: left; 
 
    margin: 10px 10px 10px 0; 
 
} 
 

 
#dropOnMe { 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 0.5em; 
 
    float: left; 
 
    margin: 10px; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<div id="dragMe" data-id="ABCDE" class="ui-widget-content"> 
 
    <p>Drag me to my target</p> 
 
</div> 
 

 
<div id="dropOnMe" class="ui-widget-header" data-id="DEFG"> 
 
    <p>Drop here</p> 
 
</div>

Answer 2

Sie können das Ereignis Objekt unter dem Drop-Objekt untersuchen. Wie event.target wird die Div-ID geben, wo Sie die Box gezogen haben. In ähnlicher Weise können Sie auf andere Eigenschaften zugreifen und nach Ihrem Bedarf anwenden.

Hoffe, das wird Ihnen helfen.