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: 5171 - 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>:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(document).ready( function() {
  2. 	$("div.draggable").dragdrop();
  3. });


Element:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="draggable" style="position: absolute; width: 100px; height: 100px; left: 125px; top: 125px;"></div>


Script:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  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.021s