ansaurus

Question

jquery drag image

Answer 1

+5 A:

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'"?

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

Jonathan Sampson 2009-06-19 20:23:42

im sorry but what is #draggable and "ready"?

amit 2009-06-19 20:40:28

#draggable is the id of the element.i.e. <div id="draggable">Content</div>ready is the Jquery function that executes what ever is within it ( draggable() ) once the DOM is ready i.e. the page is fully rendered.

Shadi Almosri 2009-06-19 20:46:11

Answer 2

+6 A:

Hey Amit,

I made you a demonstration here: http://labs.dante-studios.com/jquery/drag.html

(have a look at the source) for conveniance i've posted the code below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag Demo</title>

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
.container {
    margin-top: 50px;
    cursor:move;
}
#screen {
    overflow:hidden;
    width:500px;
    height:500px;
    clear:both;
    border:1px solid black;
}
-->
</style>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">
$(function() {
    $("#draggable").draggable();
});
</script>
</head>

<body>

<div class="container">

    <div id="screen">
     <img src="images/211.jpg" class="drag-image" id="draggable"/>
    </div>

</div>

</body>
</html>

Shadi Almosri 2009-06-19 21:03:12

The image doesn't stop dragging at the bounds of the DIV.

J-P 2009-06-19 21:07:15

But it does exactly as the user has asked for in the question :)

Shadi Almosri 2009-06-19 21:13:29

Yes, good point :)

J-P 2009-06-19 21:17:54

can u also tell me how to make the image to stop dragging along its edges. i mean it should snap to the container and there should not be any whitespace visible after the image.

amit 2009-06-20 10:24:05

i am not able to get it to work. the image is not dragging. my markup is exactly same as yours, its just the whole container is set inside another div. also there is another div (with a higher z-index) over the image divs. also as i understand i do not need to "get" the image elements, that is taken care of by the "$", right? also im making the actual "img" element by the DOM. pls help.

amit 2009-06-20 10:46:44

If there is another div above the image with a higher z index then you won't be able to move the image, as the dragging is connected to the image, and you are now trying to move the higher layers div, it's not possible to then move what is below it.

Shadi Almosri 2009-06-21 05:59:08

Snapping to the container would be quite hard, i've played around with it but hadn't managed to get it to work correctly, you'll have to play with some clever css positioning and use the constraint values, it will take quite a bit of tweaking, might be worth setting up another Stackoverflow question for it.

Shadi Almosri 2009-06-21 06:00:36

Regarding your other questions, if you post up some code online then i can try and debug for you :)

Shadi Almosri 2009-06-21 06:01:16

Answer 3

A:

Erm.. How do I use this together with asp .net? since my image object is running at the server-side.

2009-08-26 21:16:56

hey, asking questions is fine.. you know, when is an specific point, what you are requesting is somebody to do you work! you don´t know how to merge it with asp.net? or php? or whatever?? seriously, no ofense.. do you know what server side is? because if you don´t.. probably you should hire somebody to finish it.

Andy 2009-11-26 19:01:36

Answer 4

A:

Hi, how can i save new image ? i mean thumbnail image

Titan Nguyen 2010-04-28 05:53:52

ansaurus

tags:

views:

answers:

jquery drag image

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

related questions