jquery drag image

Question

i want to make a draggable image in jquery. first of all my experience with jquery is 0. having said that let me describe what i want to achieve. i have fixed width/height

Answer 1

$('#dragMe').draggable({ containment: 'body' });

This code will make it posible to drag the div with the ID of dragMe where ever you want inside the body of the document. You can also write a class or id as containment.

$('#dragMe').draggable({ containment: '#container' });

This code will make the div dragMe able to be draggable inside of the id container.

Hope this helps otherwise you should be able to find your answer here http://jqueryui.com/demos/draggable/

Answer 2

You want the jQuery Draggable UI tool. The code for this, as with all jQuery, is very simple:

$(document).ready(function(){
  $("#draggable").draggable();
});

Will create a draggable object from a standard html tag (the IMG in your case). And for limiting it's mobility to a specific region, you would look into its containment option.

Update: "What is '#draggable' and 'ready'"?

1. '#draggable' represents the element that you want to be able to drag. The hash (#) symbol represents an ID. When you add your image tags, may give give it an id like the following:
   
   <img src="myimage.jpg" id="draggable" />
   
   That will make the javascript above make your image draggable, because it has the '#draggable' id that the jQuery is looking for.
2. '.ready()' is the method that is automagically raised by your browser once the page is finished loading. Developers are encouraged by the jQuery group to place all jQuery code within this method to ensure all of the elements on the page are completely loaded prior to any jQuery code attempts to manipulate them.

Answer 3

to limit to a region for this example, containment is not much of a help. I have implemented this for vertical only scroll, needs enhancement for horizontal limit:

stop: function(event, ui) {
    var helper = ui.helper, pos = ui.position;
    var h = -(helper.outerHeight() - $(helper).parent().outerHeight());
    if (pos.top >= 0) {
        helper.animate({ top: 0 });
    } else if (pos.top <= h) {
        helper.animate({ top: h });
    }
}

Answer 4

Expanding on the answer from PH. this will provide an elastic bounceback whenever the image is dragged to the point the underlying container is exposed:

stop: function(event, ui) {
        var helper = ui.helper, pos = ui.position;
        var h = -(helper.outerHeight() - $(helper).parent().outerHeight());
        var w = -(helper.outerWidth() - $(helper).parent().outerWidth());
        if (pos.top <= h) {
            helper.animate({ top: h });
        } else if (pos.top > 0) {
            helper.animate({ top: 0 });
        }
        if (pos.left <= w) {
            helper.animate({ left: w });
        } else if (pos.left > 0) {
            helper.animate({ left: 0 });
        }
    }

Answer 5

You can use the following;

$(function() {
  $("#draggable").draggable();
});

.container {
  margin-top: 50px;
  cursor: move;
}

#screen {
  overflow: hidden;
  width: 200px;
  height: 200px;
  clear: both;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="container">
  <div id="screen">
    <img src="https://picsum.photos/200/200" class="drag-image" id="draggable" />
  </div>
</div>