[ACCEPTED]-jquery drag image-jquery-ui

Accepted answer

Score: 26

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>

Score: 9

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

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

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

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

'#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.
'.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.

Score: 3

to limit to a region for this example, containment 3 is not much of a help. I have implemented 2 this for vertical only scroll, needs enhancement 1 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 });
    }
}

Score: 1

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

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

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

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

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

Score: 0

Expanding on the answer from PH. this will 3 provide an elastic bounceback whenever the 2 image is dragged to the point the underlying 1 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 });
        }
    }

Source: stackoverflow.com

[ACCEPTED]-jquery drag image-jquery-ui

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

How to move an element in the DOM?

Setting boundary limits for a draggable object

Making a JQuery button act as a dropdown

How can I deselect text using Javascript or jQuery?

How do I dynamically change min,max values for jquery ui slider?

JS/jQuery TypeError: jQuery(...).datepicker is not a function

Auto complete Appearing behind the Modal popup

import jQuery-ui and jQuery with npm install

Passing data to a jQuery UI Dialog

add click event to Jquery UI accordian Header