Drag & Drop systeem
Ik kan items verslepen van links naar rechts maar ik zou meerdere destination fields willen hebben waarin de waarden kunnen opgeslagen worden. Ook zou ik de velden in de sourceFields container moeten kunnen laten laten zodat de waarden ook in meerdere destinationFields containers kunnen geplaatst worden.
De gegevens van iedere destination container moeten ook in een mysql tabel opgeslagen worden.
Het script dat ik hier heb gebruikt: https://github.com/mateagar/fieldChooser
Ik heb ook een fiddle gemaakt met het voorbeeld zoals hieronder: http://jsfiddle.net/kq7h6pkp/
De html code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="fieldChooser" tabIndex="1">
<div id="sourceFields">
<div>First name</div>
<div>Last name</div>
<div>Home</div>
<div>Work</div>
<div>Direct</div>
<div>Cell</div>
<div>Fax</div>
<div>Work email</div>
<div>Personal email</div>
<div>Website</div>
</div>
<div id="destinationFields"></div>
</div>
<div id="sourceFields">
<div>First name</div>
<div>Last name</div>
<div>Home</div>
<div>Work</div>
<div>Direct</div>
<div>Cell</div>
<div>Fax</div>
<div>Work email</div>
<div>Personal email</div>
<div>Website</div>
</div>
<div id="destinationFields"></div>
</div>
De javascript code:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script>
$(document).ready(function () {
var $sourceFields = $("#sourceFields");
var $destinationFields = $("#destinationFields");
var $chooser = $("#fieldChooser").fieldChooser(sourceFields, destinationFields);
});
</script>
$(document).ready(function () {
var $sourceFields = $("#sourceFields");
var $destinationFields = $("#destinationFields");
var $chooser = $("#fieldChooser").fieldChooser(sourceFields, destinationFields);
});
</script>
Gewijzigd op 08/12/2014 10:28:26 door Brecht S
http://jqueryui.com/draggable/
http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
http://www.xmech.net/programming/jquery-ui-sortable-tutorial/
De laatste link legt uit hoe je het moet storen. De andere 2 zijn als refferentie :)
Edit :
Ik ben niet in de stemming om onvriendelijke dingen te zeggen, dus ik ga dit verder laten rusten :). Succes met het oplossen van dit probleem :)
http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
http://www.xmech.net/programming/jquery-ui-sortable-tutorial/
De laatste link legt uit hoe je het moet storen. De andere 2 zijn als refferentie :)
Edit :
Ik ben niet in de stemming om onvriendelijke dingen te zeggen, dus ik ga dit verder laten rusten :). Succes met het oplossen van dit probleem :)
Gewijzigd op 08/12/2014 10:48:29 door Jacco Engel
@Jacco: Het opslaan zoals het in je laatste voorbeeld staat lijkt me logisch maar ik denk niet dat het zo eenvoudig ligt, zeker niet als er meerdere destinationField containers zijn. Ook voor de eerste 2 voorbeelden is dit puur het principe van drag & drop maar niet om lijstitems van links naar rechts te verplaatsen zodat ze ook links blijven staan. Sorry, maar ik zie niet echt een toepassing die ik kan gebruiken om mijn voorbeeld hierboven te laten werken.