Drag and Drop: Handle drag and drop events of page elements

Recommend this page to a friend!
     
  Info   View files Files   Download Download   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2025-07-09 (1 hour ago) RSS 2.0 feedStarStarStar 48%Total: 389 All time: 92 This week: 3Up
Version License JavaScript version Categories
drag-drop 1.0.2GNU General Publi...1.0Events
Description 

Author

Mark Rolich

This object can handle drag and drop events of page elements.

It can start listening to mouse events on given page elements to track drag and drop movements.

The can call given callback function when the drag starts, moves or stops.

The movements of the dragged elements can be restricted one of the axis, vertical or horizontal.

The movement positions can be snapped to positions of a given spacing distance between the snap points.

Picture of Mark Rolich
  Performance   Level  
Name: Mark Rolich <contact>
Classes: 13 packages by
Country: Armenia Armenia
Age: 44
All time rank: 111 in Armenia Armenia
Week rank: 6 Up1 in Armenia Armenia Equal

Level 4 StarStarStarStar

 Innovation award
Innovation award
Nominee: 6x

Winner: 1x

Details

This Javascript package implements drag-n-drop functionality in a browser.

Supports:
- Moving an element horizontally, vertically and in both directions
- Snap to grid functionality
- Limitation of moving distance
- Registering of user-defined function on start, move and stop

Tested in the following browsers: IE 6.0, FF 17, Chrome 22, Safari 5.1.1

Dragdrop.js requires Event.js package, which can be acquired at the following links:
Github - https://github.com/mark-rolich/Event.js
JS Classes - http://www.jsclasses.org/package/212-JavaScript-Handle-events-in-a-browser-independent-manner.html

Copyright (C) 2012  Mark Rolich

  Files folder image Files (8)  
File Role Description
Accessible without login Plain text file demo.css Data Demo styles
Accessible without login Plain text file demo_advanced.html Data Advanced demo
Accessible without login Plain text file demo_simple.html Data Simple demo
Accessible without login HTML file documentation.html Doc. Documentation
Plain text file Dragdrop.js Class Main function
Accessible without login Image file grid.png Icon background image for advanced demo
Accessible without login Plain text file license.txt Lic. LICENSE
Accessible without login Plain text file README Data README

Downloaddrag-drop-2025-07-09.zip
Downloaddrag-drop-2025-07-09.tar.gz
Needed packages  
Class DownloadWhy it is needed Dependency
Event Download .zip .tar.gz for cross-browser event handling Required
 Version Control Reuses Unique User Downloads Download Rankings  
 100%2
Total:389
This week:0
All time:92
This week:3Up
 User Ratings  
 
 All time
Utility:70%StarStarStarStar
Consistency:55%StarStarStar
Documentation:75%StarStarStarStar
Examples:-
Tests:-
Videos:-
Overall:48%StarStarStar
Rank:56
  

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.


  Other classes that need this package  
Class Why it is needed Dependency
JS Measure to enable drag-drop functionality Required
JS Rulers Guides For drag-n-drop functionality Required

  Related pages  
Git repo
Documentation with some examples
Simple demo
Advanced demo