Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Scriptaculous, Prototype drag and drop question

    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
    Code:
    <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.

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    http://www.gregphoto.net/sortable/advanced/

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

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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

    Thanks again for your time
    Last edited by tripwater; 07-14-2008 at 09:47 PM.

  • #4
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <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
    Last edited by tripwater; 11-06-2008 at 09:14 PM.

  • #5
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    try the following to figure out what was dropped

    Code:
    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

  • #6
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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
    Last edited by tripwater; 11-07-2008 at 08:38 PM.

  • #7
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    no, don't replace element... it's in there as a part of the droppable options

    http://github.com/madrobby/scriptacu...kis/droppables

    check out the first example, mimic the usage

  • #8
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ok, again I plugged this in and I don't get errors or an alert. Here is what I have so far.

    Code:
    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());
    	}});
    }

  • #9
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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.
    Last edited by ohgod; 11-10-2008 at 02:51 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •