CODEWITHSUNDEEP
javascriptjquerydomjquery-ui
amit
amit

Reputation: 10261

jquery drag image

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 div. and the image contained inside the div is large in size. so i want the image to be draggable inside that div so that the user can see the entire image.

can someone help. pls be a little elaborate about the procedure considering my jquery fluency.

Upvotes: 12

Views: 63040

Answers (5)

Shadi Almosri
Shadi Almosri

Reputation: 11989

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>

Upvotes: 26

jerrygarciuh
jerrygarciuh

Reputation: 22018

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 });
        }
    }

Upvotes: 0

Joel
Joel

Reputation: 11

$('#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/

Upvotes: 1

PH.
PH.

Reputation: 616

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 });
    }
}

Upvotes: 3

Sampson
Sampson

Reputation: 268462

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.

Upvotes: 9

Related Questions