jQuery UI Sortable to recognise empty sortable containers

Question

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!

You need a combination of draggable with droppable to restrict drop when slot is empty without disturbing the slots which already contain a task. — Parkash Kumar
– Parkash Kumar, Commented May 19, 2015 at 13:10

Community · Accepted Answer · 2017-05-23 11:58:26Z

1

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

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered May 19, 2015 at 13:28

Parkash Kumar

4,7303 gold badges25 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI Sortable to recognise empty sortable containers

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related