2016-12-02 2 views
0

Ich bin auf der Suche nach einer Möglichkeit, Benutzern eine eigene Seite zu erstellen, einschließlich eines Menüs. Daher möchte ich ihnen die Möglichkeit geben, es grafisch zu machen, so dass sie einen Menüpunkt hinzufügen können, eine kleine Vorschau sehen können wie sie aussieht .. Das Menü muss dann in der db unter der entsprechenden Benutzerkennung gespeichert werden ... .Laravel Menu Builder für Benutzer

Wie kann ich eine solche Funktionalität implementieren oder wie kann ich nach Tutorials suchen? Es wurde leider nichts finden, das ist, was ich brauche ..

ich benutze Larvavel 5.3, vielleicht könnte dies helfen, es leichter zu machen .. jQuery auch möglich ist ..

Bitte nicht downvote, weil ich Kein Code veröffentlicht, denn das ist die Tatsache, ich habe noch keinen Code dafür, da ich keine Ahnung habe, wie ich mit diesem "graphischen Live-Gebäude" anfangen soll.

+0

Möglicherweise müssen Sie sich die Drag & Drop-Funktion von Jquery ansehen. So können Sie Liste der Menüs auf einer Seite haben, dann kann der Benutzer auf die andere Seite als Vorschau ziehen – Michel

+0

@Michel Könnte der Benutzer dann einfach Elemente hinzufügen, sortieren, und habe ich eine Chance, sie in der DB dann zu speichern? – nameless

+0

@Michel in Bezug auf jquery droppable Ich fand diese Geige (http://jsfiddle.net/karim79/MvnEv/), wo Sie Elemente hinzufügen können, wissen Sie, ob es auch Funktionen zum Bearbeiten von Elementen nach dem Hinzufügen gibt, löschen Sie sie usw. .? – nameless

Antwort

0
<!DOCTYPE HTML> 
<html> 
<head> 
<script> 
function allowDrop(ev) { 
    ev.preventDefault(); 
} 

function drag(ev) { 
    ev.dataTransfer.setData("text", ev.target.id); 
} 

function drop(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("text"); 
    //So you have what user sent here as "**data**" You can use that to make an AJX call 
    ev.target.appendChild(document.getElementById(data)); 
} 
</script> 
</head> 
<body> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

<img id="drag1" src="img_logo.gif" draggable="true" 
ondragstart="drag(event)" width="336" height="69"> 

</body> 
</html> 

Denken Sie daran, JQuery Drag & Drop erforderlich.

+0

Kannst du mir eine Geige geben, damit ich sehen kann, was es macht und wie es funktioniert? Und was genau ziehst du mit jQuery Drag & Drop? und kann ich in Ihrem Beispiel auch Menüpunkte ändern? – nameless