Wie erstellt man mehr als eine Drop-Zone beim Ziehen mit jquery eingeben?

Gibt es eine Möglichkeit, mehr als eine Drop-Zones auf einer Seite zu generieren, während Sie ein Feld oder ein Element per Drag & Drop in den Container ziehen? Zum Beispiel, wenn ich einen Container habe, der dynamisch obere, linke, rechte und untere Drop-Zonen erzeugt, wenn ein Feld darauf fällt. So kann ich die Option haben, meine Felder wie Zeilen und Spalten zu formatieren. So Demo page. Ich möchte diese Feldstile/Einstellungen in der Datenbank speichern.Wie erstellt man mehr als eine Drop-Zone beim Ziehen mit jquery eingeben?

Wer findet so etwas?

Quelle

2016-07-28 sridharnetha

-1

Sicher, benutzen Sie einfach eine Klasse als Dropzone Selektor (Code basierend auf https://jqueryui.com/droppable/)

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Droppable - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
    <style> 
    #draggable { width: 70px; height: 70px; padding: 0.5em; margin: 10px 10px 10px 0; border: 1px solid #000000} 
    .droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; border: 1px solid #555555 } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    $(".droppable").droppable({ 
     drop: function(event, ui) { 
     // detect which dropzone the object was dropped into 
     var index = $(".droppable").index(this); 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped in box with index: " + index); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 
<div id="draggable" class="ui-widget-content"> 
    <p>Drag me to my target</p> 
</div> 

<div class="droppable" class="ui-widget-header"> 
    <p>Drop here</p> 
</div> 
<div class="droppable" class="ui-widget-header"> 
    <p>no, Drop here</p> 
</div> 
<div class="droppable" class="ui-widget-header"> 
    <p>rather, Drop here</p> 
</div> 
<div class="droppable" class="ui-widget-header"> 
    <p>you should really Drop here</p> 
</div> 
</body> 
</html>

Quelle

2016-07-28 13:20:27

Wie erstellt man mehr als eine Drop-Zone beim Ziehen mit jquery eingeben?

Antwort

Verwandte Themen