-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit f269ee0
Showing
4 changed files
with
6,645 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| h1. JQuery plugin for HTML5 native Drag&Drop | ||
|
|
||
| This is a work in progress. Tested on Firefox 3.6 and Safari 4.0.4 on MacOS. Comments are welcome. | ||
|
|
||
| h2. Fixing JQuery events | ||
|
|
||
| This plugin restore the **dataTransfer** property to JQuery events: | ||
|
|
||
| bc. $('img').bind('dragstart', function(e) { | ||
| e.dataTransfer.setData( 'URL', $(this).attr('href) ) // <-- yes e.dataTransfer is now available! | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,234 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <script src="jquery-1.4.2.js" type="text/javascript"></script> | ||
| <script src="jquery.ndd.js" type="text/javascript"></script> | ||
| <style> | ||
| .event { | ||
| background: pink; | ||
| border: 1px solid #c00; | ||
| width: 220px; | ||
| padding: 10px; | ||
| margin: 0 0 20px 0; | ||
| } | ||
|
|
||
| img { | ||
| width: 240px; | ||
| border: 1px solid #666; | ||
| } | ||
|
|
||
| #things { | ||
| float: left; | ||
| } | ||
|
|
||
| #dropZones { | ||
| margin-left: 400px; | ||
| } | ||
|
|
||
| #dropZones > div { | ||
| width: 300px; | ||
| padding: 10px; | ||
| border: 1px solid #666; | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| #dropZones > div h3, #dropZones > div h4 { | ||
| margin: 0; | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <h1>Native Drag&Drop example</h1> | ||
|
|
||
| <p> | ||
| You can also try to drag and drop things between several browser windows. Even between different browsers in some cases. | ||
| </p> | ||
|
|
||
| <div id="things"> | ||
|
|
||
| <p id="event1" class="event" draggable="true"> | ||
| Something to do - March 21 2010 | ||
| </p> | ||
|
|
||
| <p id="event2" class="event" draggable="true"> | ||
| Meeting - April 04 2010 | ||
| </p> | ||
|
|
||
| <p> | ||
| <img alt="Commodore 64" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Commodore64.jpg/800px-Commodore64.jpg" draggable="true"> | ||
| </p> | ||
|
|
||
| <p> | ||
| <img alt="Atari ST" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Atari_1040STf.jpg/800px-Atari_1040STf.jpg" draggable="true"> | ||
| </p> | ||
|
|
||
| </div> | ||
|
|
||
| <div id="dropZones"> | ||
|
|
||
| <div id="events"> | ||
| <h3>You can drop events here</h3> | ||
| <ul></ul> | ||
| </div> | ||
|
|
||
| <div id="images"> | ||
| <h3>You can drop an image here</h3> | ||
| <p></p> | ||
| </div> | ||
|
|
||
| <div id="links"> | ||
| <h3>You can drop any link here</h3> | ||
| <h4>(even from other apps)</h4> | ||
| <ul></ul> | ||
| </div> | ||
|
|
||
| <div id="any"> | ||
| <h3>You can drop any text here</h3> | ||
| <h4>(even from other apps)</h4> | ||
| <ul></ul> | ||
| </div> | ||
|
|
||
| <div id="files"> | ||
| <h3>You can drop any file here</h3> | ||
| <ul></ul> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <script type="text/javascript" charset="utf-8"> | ||
|
|
||
| // Make events draggable | ||
| $('.event').draggable( | ||
| function() { | ||
| return { | ||
| effect: 'move', | ||
| 'my/event': $(this).html(), | ||
| 'URL': 'http://foo.com/events/' + $(this).attr('id'), | ||
| 'Text': $(this).html() | ||
| } | ||
| }, | ||
| function() { | ||
| $(this).animate({opacity: 0}, function() { | ||
| $(this).animate({opacity: 1}) | ||
| }) | ||
| } | ||
| ) | ||
|
|
||
| // Make img draggable | ||
| $('img[draggable]').draggable( | ||
| function() { | ||
| return { | ||
| effect: 'copy', | ||
| 'my/image': $(this).attr('src'), | ||
| 'URL': $(this).attr('src'), | ||
| 'Text': $(this).attr('alt') | ||
| } | ||
| } | ||
| ) | ||
|
|
||
| // Events container | ||
| $('#events').droppable( | ||
| 'my/event', | ||
|
|
||
| // Drag enter | ||
| function() { | ||
| $(this).css('background', 'yellow') | ||
| }, | ||
|
|
||
| // Drag leave | ||
| function() { | ||
| $(this).css('background', 'none') | ||
| }, | ||
|
|
||
| // Drop! | ||
| function(e) { | ||
| $('ul', this).append('<li>' + e.dataTransfer.getData('my/event') + '</li>') | ||
| } | ||
| ) | ||
|
|
||
| // Images container | ||
| $('#images').droppable( | ||
| 'my/image', | ||
|
|
||
| // Drag enter | ||
| function(e) { | ||
| $(this).css('background', 'yellow') | ||
| }, | ||
|
|
||
| // Drag leave | ||
| function() { | ||
| $(this).css('background', 'none') | ||
| }, | ||
|
|
||
| // Drop! | ||
| function(e) { | ||
| $('p', this).html('<img src="' + e.dataTransfer.getData('my/image') + '">') | ||
| } | ||
| ) | ||
|
|
||
| // Links container | ||
| $('#links').droppable( | ||
| 'URL', | ||
|
|
||
| // Drag enter | ||
| function(e) { | ||
| $(this).css('background', 'yellow') | ||
| }, | ||
|
|
||
| // Drag leave | ||
| function() { | ||
| $(this).css('background', 'none') | ||
| }, | ||
|
|
||
| // Drop! | ||
| function(e) { | ||
| $('ul', this).append('<li><a href="' + e.dataTransfer.getData('URL') + '">' + e.dataTransfer.getData('Text') + '</a></li>') | ||
| } | ||
| ) | ||
|
|
||
| // Any container | ||
| $('#any').droppable( | ||
| 'Text', | ||
|
|
||
| // Drag enter | ||
| function(e) { | ||
| $(this).css('background', 'yellow') | ||
| }, | ||
|
|
||
| // Drag leave | ||
| function() { | ||
| $(this).css('background', 'none') | ||
| }, | ||
|
|
||
| // Drop! | ||
| function(e) { | ||
| $('ul', this).append('<li>' + e.dataTransfer.getData('Text') + '</li>') | ||
| } | ||
| ) | ||
|
|
||
| // Files container | ||
| $('#files').droppable( | ||
| 'Files', | ||
|
|
||
| // Drag enter | ||
| function(e) { | ||
| $(this).css('background', 'yellow') | ||
| }, | ||
|
|
||
| // Drag leave | ||
| function() { | ||
| $(this).css('background', 'none') | ||
| }, | ||
|
|
||
| // Drop! | ||
| function(e) { | ||
| $('ul', this).append('<li>' + e.dataTransfer.files[0].fileName + '</li>') | ||
| } | ||
| ) | ||
|
|
||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
Oops, something went wrong.