Javascript draggable images script

Question

I have been looking for about three hours for a script that fulfills my criteria, since I am not good at Javascript, I am looking for a script that supports everything I need, however, all the things I have tried and looked for, didn't have the things needed. What I am looking for is:

• A HTML5, Javascript or Jquery alike script, that can make it possible to drag images with the use of the mouse button.
• It has to be possible to have more images that can be dragable at the same time.
• It shall be posible to implement it into a div so that the user can't drag the images out of the div.

With that being said, I am NOT looking for a drag and drop solution, the user should be able to drop the image wherever they want inside that specific div.

My question: Does anyone have any experience with such script and knows something that fits my criterias, it would be really appreciated if shared. Thanks.

Answer 1

It is easy to import draggable functionality in your scripts with jquery.Take a look at this link: http://jqueryui.com/draggable/. Yes it supports everything. Import those two scripts in your head tag:

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Then attach your elements like that (works with classes and ids):

 <script>
 $(function() {
 $( "#draggable" ).draggable();
 });
 </script>