Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved performance, browser support, bugfixes #3

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Improved performance, browser support, bugfixes #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9e52e7d
Improved performance, browser support, bugfixes
bcherny Jun 23, 2012
da61d9a
Bugfixes, more features, improved performance
bcherny Jun 29, 2012
e7768c8
Update draggable.js
bcherny Sep 24, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 48 additions & 31 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,48 @@
# Draggable.js #
##### Make your dom elements draggable easily. #####

### Examples
DOM:

<div id="elementToDrag">
<div class="handle"></div>
</div>

To make the whole element draggable:

var elementToDrag = document.getElementById('elementToDrag');
draggable(elementToDrag);

To make it draggable only when dragging the handle element:

var elementToDrag = document.getElementById('elementToDrag');
var handle = elementToDrag.getElementsByClassName('handle')[0];
draggable(elementToDrag, handle);

#### Notes
* You have to provide the raw element, not the one wrapped by your favorite dom query lib. Using jQuery, for example, you'd need to do something like `var elementToDrag = $('#elementToDrag').get(0);`
* If you are using AMD (e.g. require.js) this lib becomes a module. Otherwise it'll create a global `draggable`.

### Browser Compatibility
I've ran the tests in Chrome and Firefox.
If you find any incompatibility or want to support other browsers, please do a pull request with the fix! :-)

### License
This is licensed under the feel-free-to-do-whatever-you-want-to-do license.
# Draggable.js #
##### Make your dom elements draggable easily. #####

### Examples
DOM:

<div id="elementToDrag">
<div class="handle"></div>
</div>

To make the whole element draggable:

var elementToDrag = document.getElementById('elementToDrag');
draggable(elementToDrag);

To make it draggable only when dragging the handle element:

var elementToDrag = document.getElementById('elementToDrag');
var handle = elementToDrag.getElementsByClassName('handle')[0];
draggable(elementToDrag, handle);

### Notes
* You have to provide the raw element, not the one wrapped by your favorite dom query lib. Using jQuery, for example, you'd need to do something like `var elementToDrag = $('#elementToDrag').get(0);`
* If you are using AMD (e.g. require.js) this lib becomes a module. Otherwise it'll create a global `draggable`.

### Browser Compatibility
* Chrome
* Firefox
* Internet Explorer 7+ (probably 6+, but untested)
* Safari
* Opera

### To Do
* Add iOS support
* Defer to CSS3 transitions for hardware accelerated animation in modern browsers
* Defer to HTML5 drag and drop API in modern browsers

### License
This is licensed under the feel-free-to-do-whatever-you-want-to-do license.

### Changelog

v2.0 (modified by Boris Cherny)
* Minimized repaints by eliminating style queries on every step of the drag
* Generally improved performance
* Improved browser compatibility
* Standardized event names (start -> dragstart, stop -> dragend)
* Lots of bugfixes (eliminated outline dragging, fixed border/margin/zindex querying)
34 changes: 34 additions & 0 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!doctype html>
<html>
<head>
<title>draggable.js > Demo</title>

<style type="text/css">
* {border:0;margin:0;outline:0;padding:0}

body {
text-align: center
}

div {
background: #666;
height: 100px;
margin: 100px auto;
width: 100px;
}
div:hover {background:#444}
</style>

</head>
<body>
<div></div>

<script type="text/javascript" src="draggable.js"></script>
<script type="text/javascript">

var div = document.getElementsByTagName('div')[0];
new Drag(div);

</script>
</body>
</html>
Loading