Scriptaculous, Prototype drag and drop question [Archive]

View Full Version : Scriptaculous, Prototype drag and drop question

tripwater

07-11-2008, 07:05 PM

I am trying to implement the drag and drop into a gantt chart. I have a list of tasks with task
IDs that need to be reschedule. So I have a column of tasks the just
after that I have columns of dates for the month. I want to drag a
task from one date to the next and using ajax call, update the task to
the new date.

I found demo code I am working on dragging one box to another. I was
wondering how to alert the id of the draggable on the ondrop event in
the droppable? I know how to pass in the getElementById but the
problem is that this is a dynamic list and I will not know the id of
the div in order to manually pass this into the ondrop. I will be
naming the tasks (draggables) a unique id based off their taskid out
of the database. I will be naming the date columns (droppables) after
the date for that day. So in my php for loop I will build this
dynamically. But for test purposes, if I can find out how to drag a
draggable to a droppable and it tell me the id of what I just dragged
as well as the id of what I just dropped it into, well then my work is
done...I hope :)

For example
<div class="demo" id="droppable_container">
<div id="task_1234" class="draggable">
Drag me!
</div>

<div id="drop_2008-7-11">
Drop here!
</div>

</div>

<script type="text/javascript">
var mydrag1 = new Draggable('task_1234', { scroll: window, constraint: 'horizontal', handle: 'handle' });

Droppables.add(
'drop_2008-7-11', {
accept: 'draggable',
hoverclass: 'hover',
onDrop: function()
{
alert( );//NEED TO ALERT THE ID OF DRAGGABLE AND THE ID OF DROPPABLE IT WAS DROPPED IN
$( 'droppable_demo' ).highlight();
}
} );
</script>

I hope this makes sense and thank you for any help with this.

ohgod

07-11-2008, 09:14 PM

http://www.gregphoto.net/sortable/advanced/

check out how that does the debug serialization, might give you some ideas

tripwater

07-14-2008, 10:38 PM

Thanks, I checked it out and currently working on variations of that example. I am just learning this library and what it does. I changed it around to work in columns and I want to limit the drag to horizontal only. SO you would only drag from one row's date to another date column in same row. I read that you can add the constraint : "horizontal" and I did that but it does not seem to be constraining...my end result you will not be resorting vertically. You will only be moving and item from one date to the other and if there is something already there, it will just add it under it or above it when you drop it and it stay there vertically.

Here is an example page. I know I am missing something simple.

Test page (http://tasks.nizex.com/nizex2/projectmanagement/test.php)

Thanks again for your time

tripwater

11-06-2008, 10:10 PM

Hello, I am still needing help with this. I figured out the horizontal constraint when I went back to using draggables and droppables.

If someone could tell me how to tell the onDrop:function the id of what was dragged and the id of what it was dropped on, I will be doing well.

I tried the example using sortable lists that ohgod posted but could not apply it to my needs, so I came back to my first example. I got it to constrain horizontally now and I would like for my onDrop function to know what was dragged and what it was dropped, once I know the ids of this, I can pass these into my callback function and update my DB.

Here is what I have so far.
<script type="text/javascript">
function mytest()
{
new Draggable('1575', { constraint: 'horizontal', scroll: window, snap: [40, 0] });
Droppables.add('2008-09-10', {
accept: '1575',
hoverclass: 'hover',
onDrop:function() { alert( Draggable and droppable IDs here )} });
}
</script>

</head>
<body onload="mytest()">
<style type="text/css">
div#droppable_container {
height: 140px;
width: 400px; }
div.draggable_demo {
width: 60px;
height: 60px;
cursor: move;
background: #9fcfba;
border: 1px solid #666;
text-align: center;
position: relative;
top: 30px;
line-height: 50px; }
div.droppable_demo {
width: 160px;
height: 120px;
background: #fff;
border: 5px solid #ccc;
text-align: center;
position: relative;
top: -60px;
left: 140px;
line-height: 100px; }
div.droppable_demo.hover {
border: 5px dashed #aaa;
background:#efefef; }

</style>

<div class="demo" id="droppable_container">
<div class="draggable_demo" id="1575">
Drag me!
</div>

<div class="droppable_demo" id="2008-09-10">
Drop here!
</div>
</div>

Thanks for any help

ohgod

11-07-2008, 02:29 AM

try the following to figure out what was dropped

onDrop: function(element) { alert( $(element).identify() );}

i'll get back on later and show you how i do what you're trying to... but first i gotta get some work done

tripwater

11-07-2008, 08:40 PM

Thanks for the reply. I assume I have to pass something in for element, or set element above? I plugged this in and did not change anything and it does not do anything so far. I am not a great JS programmer (more php ) so forgive the ignorance here.

I assume element has to be the ID of what I am dropping in, but at this point I, as the programmer, do not know what the ID is which is what I need. As well as the ID of what it is dropped onto.

Thanks again for your time and patience.

Test Page (http://tasks.nizex.com/nizex2/projectmanagement/test.php)

ohgod

11-08-2008, 12:41 AM

no, don't replace element... it's in there as a part of the droppable options

http://github.com/madrobby/scriptaculous/wikis/droppables

check out the first example, mimic the usage

tripwater

11-10-2008, 02:38 PM

ok, again I plugged this in and I don't get errors or an alert. Here is what I have so far.

function mytest()
{
new Draggable('1575', { constraint: 'horizontal', scroll: window, snap: [40, 0] });
Droppables.add('2008-09-10', {
accept: '1575',
hoverclass: 'hover',
onDrop:function(e)
{
alert($(element).identify());
}});
}

ohgod

11-10-2008, 03:49 PM

look at the example again............

it doesn't say function(e), nor did i... it says function(element). it's part of the class, just like transport is the object returned from a prototype ajax call.

that aside, check your usage of "accept". in the docs you'll see that accept is to be used with a css class, not an ID.