Yes, this can be done. I have used the following code in a list of items (a
html table structure) where items can be dragged to either a folder or a
trashbin.
Here is some of the code:
[code]
86 $(".dndFolder").Draggable (
87 {
88 autoSize:true,
89 ghosting:true,
90 revert:true,
91 fx: 200
92 });
93 $(".dndFolder").Droppable (
94 {
95 accept:"draggable",
96 hoverclass:"dropzonehover",
97 activeclass:"dropzonehover",
98 onDrop:function(drag)
99 {
100 if (this.id != drag.id)
101 {
102 //moveItem ("tasks", this.id.split
("_")[1], drag.id.split ("_")[1],\''.session_id(
).'\');
103 moveItem ("tasks", this,
drag,\''.session_id().'\');
104 }
105 }
106 });
107 $(".draggable").Draggable (
108 {
109 autoSize:true,
110 ghosting:true,
111 revert:true,
112 fx: 200,
113 onStart:function()
114 {
115 currentDrag = $(this).parent().parent();
116 currentDrag.removeClass().addClass
("selected");
117 }
118 });
119 $("#trash").Droppable (
120 {
121 accept:"draggable",
122 hoverclass:"dropzonehover",
123 activeclass:"dropzonehover",
124 onDrop:function(drag)
125 {
126 var what = drag.id.split ("_");
127 var theType =
(what[0]=="folder"?"folder":"item");
128 //animateDeleteItem ((drag.id).substring
(5));
129 //deleteItem ("tasks",
(drag.id).substring (5));
130 deleteItem ("tasks", theType, what[1]);
131 }
132 });
150 $(document).bind("mouseup", function ()
151 {
152 if (currentDrag)
153 {
154 zebraItems ();
155 currentDrag = null;
156 }
157 });
[/code]
The interface DnD functions are used
moveItem is the javascript function that handles the db update
This could probably be done a better way, but since I use pretty large
tables I disabled this DnD functionality since performance was pretty bad
when using it on over about 50 items....
Circlefusion wrote:
>
> Hey all,
>
> I'm researching JQuery for a project at work. It is a recipe website that
> has a "recipe box" feature where they want to be able to drag recipes
> between folders for organization. Here is a screen shot of the basic
> functionality that I'm trying to accomplish.
>
> http://www.circlefusion.com/projects/ge/recipe_box_drag.png
>
> A couple of rules for the drag-drop:
>
> If the recipe is not dragged to an appropriate target (a folder) then it
> stays in it's original position when the mouse is released.
>
> After the drop is completed, an AJAX call would update the database and
> reload the recipe list in whichever folder the user is located.
>
> I couldn't find a clear example of this type of drag-drop scenario on any
> of the JQuery demos. I saw similar things on the Interface website in the
> demos section. http://interface.eyecon.ro/
>
> Can someone give me some direction? Suggestions? Tips?
>
> Or just let me know if this can be done using JQuery. I was considering
> using YUI, but so far I find JQuery easier to use. I'm assuming that
> Interface is what I'm looking for (for drag-drop functionality)
>
> Thanks
>
> Cf
>
--
View this message in context:
http://www.nabble.com/I-could-use-help-with-Drag-drop-tf3064614.html#a8597817
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
