CODEWITHSUNDEEP
jqueryjquery-ui
lukeseager
lukeseager

Reputation: 2615

jQuery UI Sortable to recognise empty sortable containers

I'm having a bit of trouble with jQuery UI Sortable. I'm trying to make a daily schedule, so you have each hour in the day, and tasks that can be moved around.

Here's a live example of what I have so far: plantoday.lukeseager.com

As you can see, you can sort the items fine. But...if you try to move task 4 from 06:00 to 04:00, it moves task 3 down one step to 06:00, which obviously isn't needed as 04:00 is blank and shouldn't effect the other tasks.

I have a feeling I can do something with the sort option, to check if an item is blank, and if it is somehow stop sortable from moving the other tasks around. But I'm not really sure how to go about this.

Here's the code I have so far:

$('.tasks').sortable({
    revert: true,
    handle: '.content',
    cancel: '.blank'
});

My HTML Structure is quite simple:

<ol class="tasks">
    <li class="task">
        <div class="content">
            <h4>Some task</h4>
            <p>A description for task</p>
        </div>
    </li>
    <li class="task">
        <div class="content">
            <h4>Some task 2</h4>
            <p>A description for task 2</p>
        </div>
    </li>
    <li class="task blank"></li>
    <li class="task blank"></li>
    // etc...
</ol>

Any help would be appreciated!

Upvotes: 0

Views: 204

Answers (1)

Parkash Kumar
Parkash Kumar

Reputation: 4730

As, I already said, you need to implement a combination of draggable with droppable to achieve what you want.

Thanks to this post: jQuery sortable with droppable

$(".content").draggable({
    revert: true,
    revertDuration: 0
});

$(".task").droppable({
    activeClass: "active",
    hoverClass: "hover"
.
.
.
});

I have incorporated solution (accepted answer) given in the above post in you case, see DEMO

Upvotes: 1

Related Questions