Menu
I love and use jQuery quite a lot, but I am hoping to find an alternate solution for a special project.
I am creating a bookmarklet which will interface with my application to allow users to enter information much quicker. One of the greatest pains in my application at the moment is uploading images. Users (understandly) hate the process of downloading images to their computers in an organized fashion, and then uploading them to the app.
What I would love the bookmarklet to do is load in a small div overlay with a couple small controls in it, including one which would allow the user to drag and drop images from the current page into the control. The script would then collect the URI's of those img tags and submit them along with the form to the app, and then they would automatically be downloaded by the server into the app.
So, for this task, loading jQuery and jQuery UI into the page every time you click the bookmarklet seems like a very heavy-handed approach.
Can anyone recommend a nice, light-weight, Javascript toolkit that handles drag and drop functionality and nothing else?
I was excited to read about the new DragDealer tool, which looks awesome, just today on ajaxian but it seems that it is built to handle only dragging and not "dropping" (i.e., not targets)
623
The draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the HTML Drag and Drop API.
By default, only image and text can be draggable. To drag an image, you simply hold the mouse button down and then move it. To drag the text, you need to highlight some text and drag it in the same way as you would drag an image.
To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page. Our example creates an interface to rearrange columns that have been laid out with CSS Grid.
onmousedown = dragMouseDown; }; const dragable = document. getElementById("dragable"), dragzone = document. getElementById("dragzone"); dragElement(dragable, dragzone); Hopefully by using the code above you will know how to create JavaScript Draggable Div.
I think a library might not be the best solution and just try searching for a function/stand alone plugin/widget that just delivers this functionality for you such as
53
REDIPS.drag JavaScript library covers only drag and drop (table content). Actually HTML table is used as layout and DIV elements can be moved across table cells. In a moment when dragged element is over table cell, table cell will be highlighted - if is enabled. Minimized and GZIPed, library is less then 10Kb. Here is link to the demo page:
http://www.redips.net/javascript/drag-and-drop-table-content/
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
