Comments on: Drag and Drop Example using jQuery JavaScript in HTML http://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html Tutorials, Java, J2EE, Struts, AJAX, JavaScript, CSS, Web 2.0, MySQL, Articles Wed, 08 Feb 2012 10:36:26 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Meghahttp://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html/comment-page-1#comment-16717 Megha Thu, 20 Oct 2011 19:21:40 +0000 http://viralpatel.net/blogs/?p=1240#comment-16717 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();     });       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();
    });
     

]]> By: Rajuhttp://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html/comment-page-1#comment-15034 Raju Mon, 20 Jun 2011 11:47:49 +0000 http://viralpatel.net/blogs/?p=1240#comment-15034 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. 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.

]]> By: justinhttp://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html/comment-page-1#comment-13559 justin Wed, 15 Dec 2010 12:45:39 +0000 http://viralpatel.net/blogs/?p=1240#comment-13559 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. 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.

]]> By: C. Nelsonhttp://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html/comment-page-1#comment-13027 C. Nelson Mon, 23 Aug 2010 21:13:54 +0000 http://viralpatel.net/blogs/?p=1240#comment-13027 Where does the code in the 'code snippet' section go? So far, this doesn't work. Where does the code in the ‘code snippet’ section go? So far, this doesn’t work.

]]> By: Amanhttp://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html/comment-page-1#comment-12992 Aman Fri, 13 Aug 2010 13:29:50 +0000 http://viralpatel.net/blogs/?p=1240#comment-12992 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.htmlThanks Aman 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

]]> By: Daniel Gabrielehttp://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html/comment-page-1#comment-12593 Daniel Gabriele Sun, 23 May 2010 01:22:35 +0000 http://viralpatel.net/blogs/?p=1240#comment-12593 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 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

]]> By: Alex_Dhttp://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html/comment-page-1#comment-12507 Alex_D Wed, 28 Apr 2010 23:06:02 +0000 http://viralpatel.net/blogs/?p=1240#comment-12507 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 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

]]> By: Mitzihttp://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html/comment-page-1#comment-12325 Mitzi Mon, 22 Mar 2010 22:22:23 +0000 http://viralpatel.net/blogs/?p=1240#comment-12325 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/ 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/

]]> By: Ryanhttp://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html/comment-page-1#comment-12111 Ryan Tue, 16 Feb 2010 16:25:11 +0000 http://viralpatel.net/blogs/?p=1240#comment-12111 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 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

]]> By: Roberthttp://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html/comment-page-1#comment-11963 Robert Fri, 22 Jan 2010 05:56:44 +0000 http://viralpatel.net/blogs/?p=1240#comment-11963 I tried that and get an error: "draggable is not a function"I use jQuery 1.3.2 I tried that and get an error:
“draggable is not a function”

I use jQuery 1.3.2

]]>