login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Dragula drag and drop

Offline GroundZero - 07/11/2016 12:34
Avatar van GroundZeroLid Beste,

Ik maak gebruik van Dragula voor drag and drop wat overigens perfecte werkt.

https://bevacqua.github.io/dragula/

Echter nu wil ik graag het volgende bereiken:

Ik sleep een plaatje van LINKS naar RECHTS en als ik het drop dan wil ik dat niet het plaatje er in komt te staan maar dat er iets anders word ingevoerd zeg maar.

Ik wil dus bijvoorbeeld een plaatje van een "H1" laten slepen en vallen in het rechterscherm, aan de hand van de data-file="elements/h1.php" die op het plaatje zit moet dan de inhoud van het bestand h1.php toegevoegd worden en niet het plaatje.

In het bestand h1.php staat dan bijvoorbeeld:

  1. <div class="header">
  2. <h1>
  3. Dit is mijn header
  4. </h1>
  5. </div>


welke een opmaak heeft uit een CSS bestand. Op deze manier kan ik dus een soort van pagebuilder maken.

Is er iemand die mij kan vertellen hoe ik dit kan realiseren want op Google kan ik niks vinden om dit te fixen helaas 

2 antwoorden

Gesponsorde links
Offline nielsvdwal - 07/11/2016 13:09
Avatar van nielsvdwal PHP gevorderde Heb je een voorbeeld van hoe je je eigen code nu hebt?
Offline GroundZero - 07/11/2016 13:17 (laatste wijziging 07/11/2016 13:17)
Avatar van GroundZero Lid Ik heb nog geen code haha, dit is alles (Drag en drop werkt nu meer niet omdat ik nergens kan vinden hoe te starten):

  1. <script>
  2. dragula([document.getElementById("left"), document.getElementById("right")], {
  3. copy : true
  4. })
  5. .on('drag', function (el) {
  6. el.className = el.className.replace('ex-moved', '');
  7. }).on('drop', function (el) {
  8. el.className += ' ex-moved';
  9. }).on('over', function (el, container) {
  10. container.className += ' ex-over';
  11. }).on('out', function (el, container) {
  12. container.className = container.className.replace('ex-over', '');
  13. });
  14. </script>


Dus links zou dan staan bijvoorbeeld:

  1. <img src="images/h1.png" alt="Voeg H1 tag toe" data-file="elements/h1.php" />


en als ik deze er in sleep dan zou er in het rechtervak de inhoud van het bestand h1.php geplaatst moeten worden waarin bijvoorbeeld dit staat:

  1. <div class="row">
  2. <div class="col-xs-12">
  3. <h1>Dit is een test</h1>
  4. </div>
  5. </div>
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.168s