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://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