login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:

Scripts > JS > Overige > Drag and Drop

Drag and Drop

Auteur: pinquin - 26 oktober 2010 - 13:37 - Gekeurd door: Stijn - Hits: 5164 - Aantal punten: (0 stemmen)




Dit script maakt het mogelijk om HTML elementen dynamisch te verplaatsen.
Gebruik gemaakt van Jquery versie 1.4.2

Installatie:
- Download het .zip bestand.
- Roep eerst jquery.js en daarna dragdrop.js aan.
- Beweegbare elementen moeten de style 'position: absolute' bevatten

Het .zip bestand bevat een werkend voorbeeld.
Uitbreiding en verbeteringen zijn altijd mogelijk!

Update:
- Code ingekort
- Compatible met andere js plugins
- Transparency toegevoegd bij slepen
- localStorage voor positie elementen toegevoegd (HTML5 browser req.)

Download en voorbeeld niet meer beschikbaar i.v.m. domein verhuizing

Code:
Aanroepen binnen <head></head>:
  1. $(document).ready( function() {
  2. $("div.draggable").dragdrop();
  3. });


Element:
  1. <div class="draggable" style="position: absolute; width: 100px; height: 100px; left: 125px; top: 125px;"></div>


Script:
  1. ( function(jQuery) {
  2. var draggable, prev_drag, mouseX, mouseY, z;
  3.  
  4. jQuery.fn.dragdrop = function() {
  5. return this.each( function() {
  6. if( window.localStorage ) {
  7. if( window.localStorage.getItem(jQuery(this).attr('id') ) ) {
  8. var tmp_storage = window.localStorage.getItem(jQuery(this).attr('id') ).split("x")[1];
  9. jQuery(this).css( {
  10. left: tmp_storage.split("y")[0] + "px",
  11. top: tmp_storage.split("y")[1] + "px"
  12. } );
  13. }
  14. }
  15.  
  16. jQuery(jQuery(this)).mousedown( function(e) {
  17. jQuery("*").onselectstart = function() { return false; };
  18. jQuery("*").unselectable = "on";
  19. jQuery("*").css('user-select', 'none').css('-o-user-select', 'none').css('-moz-user-select', 'none').css('-khtml-user-select', 'none').css('-webkit-user-select', 'none');
  20.  
  21. if( prev_drag )
  22. prev_drag.css( 'z-index', z );
  23.  
  24. draggable = jQuery(this);
  25. z = draggable.css( 'z-index' );
  26. draggable.css( { 'z-index': '999', filter: 'alpha(opacity=50)', '-khtml-opacity': '0.5', '-moz-opacity': '0.5', opacity: '0.5' });
  27.  
  28. mouseX = e.pageX - draggable.position()['left'];
  29. mouseY = e.pageY - draggable.position()['top'];
  30. });
  31.  
  32. jQuery(document).mouseup( function() {
  33. if( draggable ) {
  34. if(window.localStorage)
  35. window.localStorage.setItem(draggable.attr('id'), "x" + draggable.position()['left'] + "y" + draggable.position()['top']);
  36.  
  37. prev_drag = draggable;
  38. draggable.css( { 'cursor': 'pointer', filter: 'alpha(opacity=100)', '-khtml-opacity': '1', '-moz-opacity': '1', opacity: '1' });
  39. draggable = null;
  40. }
  41. }).mousemove( function( e ) {
  42. if( draggable) {
  43. draggable.css('cursor', 'move');
  44. draggable.css("left", ( ( e.pageX - mouseX ) <= 1 ? 1 : ( e.pageX - mouseX ) ) );
  45. draggable.css("top", ( ( e.pageY - mouseY ) <= 1 ? 1 : ( e.pageY - mouseY ) ) );
  46. }
  47. });
  48. });
  49. };
  50. } )( jQuery );
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (7)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.017s