Add drag and drop support #2238
Conversation
|
|
||
| var items = document.querySelectorAll('.items .item'); | ||
|
|
||
| items.forEach(function(item) { |
There was a problem hiding this comment.
That doesn't work! querySelectorAllreturns a NodeList and not an array. This could be fixed by:
var items = Array.prototype.slice.call(document.querySelectorAll('.items .item'));but that's not beautiful.
Better use an old style for loop instead the forEach!
| <div> | ||
| <h3>Items:</h3> | ||
| <ul class="items"> | ||
| <li draggable="true" class="item"> |
There was a problem hiding this comment.
These ".items" should get a style with a max-width, a border, a drag-cursor and maybe a icon that shows that they can be dragged (something like "≣")
There was a problem hiding this comment.
irrelevant now... Using pure CSS
| <script src="../../googleAnalytics.js"></script> | ||
|
|
||
| <style type="text/css"> | ||
| li { |
There was a problem hiding this comment.
These generic styles can break somebodies application if copied without thinking. Better write: li.item {
| margin-bottom: 5px; | ||
| padding: 5px 12px; | ||
| } | ||
| i { |
There was a problem hiding this comment.
You could something like this, without needing FontAwesome at all :-)
li.item:before {
content: "≣";
font-family: Arial, sans-serif;
display: inline-block;
font-size: inherit;
cursor: move;
}|
@mojoaxel There were some changes that had to be done there to support different kind of drop handlers (adding an item according to the item type in the drops' event data) |
| @@ -0,0 +1,130 @@ | |||
| <!DOCTYPE HTML> | |||
| <html> | |||
| <head> | |||
There was a problem hiding this comment.
Sorry I just noticed that the UTF-8 coding is missing: <meta charset="utf-8"/>
Without it the unicode-symbols are broken:
done! |
|
@yotamberk Thank you so much! That's really a great new feature! |
closes #2180, #1881