Question

I am finishing up a rewrite of task management system, and am in the process of adding drag and drop capabilities.

alt text

I want the user to be able to drag a task DIV from one column (TD) and drop it in another column (TD). I have this working correctly, save for some minor formatting issues. I have the TD with a class called droppable that accepts draggable classes. What I would like to happen is actually remove the task DIV from the current TD and append it to the dropped on TD.

Here is my script:

<script type="text/javascript">
    $(function() {
        $(".draggable").draggable({
            cursor:  move ,
            cancel:  a ,
            revert:  invalid ,
            snap:  true 
        });
    });
    $(function() {
        $(".droppable").droppable({
            accept:  .draggable ,
            hoverClass:  droppable-hover ,
            drop: function(event, ui) { }
        });
    });

</script>

Here is my Html:

<h3>
    My Queue</h3>
<table style="width: 100%;" class="queue">
    <tbody>
        <tr>            
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StagePG">                
            </td>            
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRY">                
            </td>           
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StagePR">                
                <div class="queue-item draggable" title="Task description goes here.">
                    <em>Customer</em>
                    <strong>Project</strong>
                    <h4><a href="/Sauron/Task/Details/100001">100001</a></h4>
                </div>

                <div class="queue-item draggable" title="Task description goes here.">

                    <em>Customer</em>
                    <strong>Project</strong>
                    <h4><a href="/Sauron/Task/Details/100002">100002</a></h4>
                </div>              
            </td>
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRT">
            </td>
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageTE">
            </td>
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRL">
            </td>            
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td style="width: 14%; text-align: center;">
                Pending (0)
            </td>
            <td style="width: 14%; text-align: center;">
                Ready (0)
            </td>
            <td style="width: 14%; text-align: center;">
                In Progress (2)
            </td>
            <td style="width: 14%; text-align: center;">
                Ready for Testing (0)
            </td>
            <td style="width: 14%; text-align: center;">
                Testing (0)
            </td>
            <td style="width: 14%; text-align: center;">
                Ready for Release (0)
            </td>
        </tr>
    </tfoot>
</table>

Struggling with the drop event and how to implement this. Any help is appreciated!

Answer 1

This example works, but it remains to be seen because the div is locatd anywhere. This works because the event is fired first "droppable" rather than "draggable"

    $(function() {

     $_dropEnd = null;

     $(".draggable").draggable({
            cursor:  move ,
            cancel:  a ,
            revert:  invalid ,
            snap:  true ,
            stop: function(event, ui) { 
               $(this).appendTo($_dropEnd);
               $_dropEnd = null;
            }
        });
    });
    $(function() {
        $(".droppable").droppable({
            accept:  .draggable ,
            hoverClass:  droppable-hover ,
            drop: function(event, ui) {
               $_dropEnd = this;
            }
        });
    });

Answer 2

As @David Lively suggested we went with the sortable route ... did exactly what I needed it to do!

友情链接