Drag and Drop Example using jQuery JavaScript in HTML

Robert says:

I tried that and get an error:
“draggable is not a function”

I use jQuery 1.3.2

Ryan says:

You need to include the jquery ui library in your document’s head, and you need to make sure it contains the draggable and droppable components for this example to work

Mitzi says:

Hello there,

First of all thanks for the tutorial. Is awesome and really simple to apply.

I am trying to use your draggable tutorial as well as the jquery.scrollTo.js. I really don’t know much about jQuery or Javascript. My idea is to make a wrapper for my website and add each page as a div. Then make this wrapper draggable, that way my users will drag the whole website to navigate through the site. But I want to make the navigation more friendly, I don’t want my users get all freaked out. So I also will add a menu to scroll to each page, for those users who wish to navigate using the menu instead of dragging. The pages are not just positioned vertically one on top of another, some are next to each other some are under , so when I use the scrollTo function the site scrolls diagonally, horizontally and vertically as well depending on the page they are going to.

I really hope all of this is making sense to you. My problem is this….

I already made the two scripts work together but I have one little problem. Sometimes after dragging the website around, when I try to go back to my page 1 (using the menu to scroll to it) it’s position is off. It is not center in my browser window anymore. Any thoughts that can help?

Here is a link to my test…
http://www.sprocketproductions.com/fxtests/scroll/

Alex_D says:

Hello!
I searched many forums but I couldn’t find a solution to my problem.
I’m working on a webpage and I’ve implemented a javascript drag & drop section.
It’s working fine in Mozilla Firefox, but I’m having a little problem in Internet Explorer.
Inside each draggable element, which are div elements, I have other div elements.
I want to add a javascript onclick function to one of theese div’s. but I can’t make it work in IE.
Could someone help me with that?
Here is a part of my code:

…..
foreach( $this->channelsList as $channel){
?>
<div id="channel” style=”height:50px;” class=”list”>
<input value="id?>” type=”hidden” name=”channel[]”/>

<img height="45" src="baseUrl()?>/img/channel_logos/id, 0, -8)?>.png” alt=”name?>” />

<div class="list-delete" onclick="delete_div('channel’)”><img alt="delete" src="baseUrl()?>/img/delete.png” />

<?
$i++;
}
….

Thanks

Daniel Gabriele says:

I honestly don’t think this is too tough to do manually. I’ve been playing with javascript and jquery for a few weeks and the logic needed to accomplish this is straight-forward: find the change in x and change in y between each “mousemove” event.

http://plaza.ufl.edu/publius/experiments/manipulables/drag-0.html

Aman says:

hi
i like you plugin. i have also some jquery drag and drop plugins.please see:-

http://jquery13.blogspot.com/2010/08/30-drag-and-drop-jquery-plugins.html

Thanks
Aman

C. Nelson says:

Where does the code in the ‘code snippet’ section go? So far, this doesn’t work.

justin says:

Daniel,
The problem doing it manually is you have to disable some functions first. A lot of browsers have their own drag and drop function on certain types of elements. So you either have to disable that or make a transparent div higher on the z axis and have that move the below element. It is not super hard, but it is not as straight forward as you would think or it should be.

Raju says:

This is nice but not working in IE. When we dragging the div in the iframe down this is working fine when i want to move this div again up then the div is dissapearing from the iframe. this behaviour is happening in IE.

Megha says:

Hi,
I am trying to drag an item and drop it to some other element. And then when the item is dropped I want the server to handle an event.I am trying to use your droppable fucntion but it doesnt work. Code I m using is:

    
    
$(“#draggable”).draggable();
$(“#droppable”).droppable ({
drop: function() { alert(‘dropped’); }
});

      
    
    $(document).ready(function(){
        $(“#move”).draggable();
    });
    

 
    
    $(document).ready(function(){
        $(“#move1”).droppable();
    });
     

sheelpriy says:

i want to make a div drag-able but a constraint of containment. like it should never get out of its parent div but should be drag-able within that parent div only

Axis Thomes says:

$(document).ready(function(){

$(“p”).show();

$(“#draggable”).draggable({scroll:true});

});