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>:
$(document).ready( function() {
$("div.draggable").dragdrop();
});
$(document).ready( function() { $("div.draggable").dragdrop(); });
Element:
<div class="draggable" style="position: absolute; width: 100px; height: 100px; left: 125px; top: 125px;"></div>
<div class="draggable" style="position: absolute; width: 100px; height: 100px; left: 125px; top: 125px;"></div>
Script:
( function(jQuery) {
var draggable, prev_drag, mouseX, mouseY, z;
jQuery.fn.dragdrop = function() {
return this.each( function() {
if( window.localStorage ) {
if( window.localStorage.getItem(jQuery(this).attr('id') ) ) {
var tmp_storage = window.localStorage.getItem(jQuery(this).attr('id') ).split("x")[1];
jQuery(this).css( {
left: tmp_storage.split("y")[0] + "px",
top: tmp_storage.split("y")[1] + "px"
} );
}
}
jQuery(jQuery(this)).mousedown( function(e) {
jQuery("*").onselectstart = function() { return false; };
jQuery("*").unselectable = "on";
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');
if( prev_drag )
prev_drag.css( 'z-index', z );
draggable = jQuery(this);
z = draggable.css( 'z-index' );
draggable.css( { 'z-index': '999', filter: 'alpha(opacity=50)', '-khtml-opacity': '0.5', '-moz-opacity': '0.5', opacity: '0.5' });
mouseX = e.pageX - draggable.position()['left'];
mouseY = e.pageY - draggable.position()['top'];
});
jQuery(document).mouseup( function() {
if( draggable ) {
if(window.localStorage)
window.localStorage.setItem(draggable.attr('id'), "x" + draggable.position()['left'] + "y" + draggable.position()['top']);
prev_drag = draggable;
draggable.css( { 'cursor': 'pointer', filter: 'alpha(opacity=100)', '-khtml-opacity': '1', '-moz-opacity': '1', opacity: '1' });
draggable = null;
}
}).mousemove( function( e ) {
if( draggable) {
draggable.css('cursor', 'move');
draggable.css("left", ( ( e.pageX - mouseX ) <= 1 ? 1 : ( e.pageX - mouseX ) ) );
draggable.css("top", ( ( e.pageY - mouseY ) <= 1 ? 1 : ( e.pageY - mouseY ) ) );
}
});
});
};
} )( jQuery );
( function(jQuery) { var draggable, prev_drag, mouseX, mouseY, z; jQuery.fn.dragdrop = function() { return this.each( function() { if( window.localStorage ) { if( window.localStorage.getItem(jQuery(this).attr('id') ) ) { var tmp_storage = window.localStorage.getItem(jQuery(this).attr('id') ).split("x")[1]; jQuery(this).css( { left: tmp_storage.split("y")[0] + "px", top: tmp_storage.split("y")[1] + "px" } ); } } jQuery(jQuery(this)).mousedown( function(e) { jQuery("*").onselectstart = function() { return false; }; jQuery("*").unselectable = "on"; 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'); if( prev_drag ) prev_drag.css( 'z-index', z ); draggable = jQuery(this); z = draggable.css( 'z-index' ); draggable.css( { 'z-index': '999', filter: 'alpha(opacity=50)', '-khtml-opacity': '0.5', '-moz-opacity': '0.5', opacity: '0.5' }); mouseX = e.pageX - draggable.position()['left']; mouseY = e.pageY - draggable.position()['top']; }); jQuery(document).mouseup( function() { if( draggable ) { if(window.localStorage) window.localStorage.setItem(draggable.attr('id'), "x" + draggable.position()['left'] + "y" + draggable.position()['top']); prev_drag = draggable; draggable.css( { 'cursor': 'pointer', filter: 'alpha(opacity=100)', '-khtml-opacity': '1', '-moz-opacity': '1', opacity: '1' }); draggable = null; } }).mousemove( function( e ) { if( draggable) { draggable.css('cursor', 'move'); draggable.css("left", ( ( e.pageX - mouseX ) <= 1 ? 1 : ( e.pageX - mouseX ) ) ); draggable.css("top", ( ( e.pageY - mouseY ) <= 1 ? 1 : ( e.pageY - mouseY ) ) ); } }); }); }; } )( jQuery );
Download code (.txt)
|
|
Stemmen |
Niet ingelogd. |
|