Drag Drop with Fixed List of Slots and Possible to Scroll

Drag Drop with Fixed List of Slots and Possible to Scroll – I have been spent a lot of my time to make it work as it should be. It seems to me, the reference about this case is too hard to find. I have searched for some articles and implemented some code too, but it still gave me some bugs.

So I decided to make it as hardcode and now I try to write the solution as an article in english version (sorry for my bad english, hope you guys can understand it). But first, before you read all of this article, please check out for the DEMO HERE. So you don’t feel worries about how it will work.

Almost all of the articles that I have red was suggest me to use UI sortable for this case. But I think it will more easier to work if we use draggable and droppable. So we can add some condition later if needed. And I have combined it with slimScroll too to make better interface.

Let’s do it step by step:

1. Install Jquery, Jquery UI And SlimScroll Core

2. Add the css style for the drag and drop

3. Below are the main html for the slots and items list that we can drag and drop.
For the slots list we will use <ul class="slot"> and <ul class="list"> for the items list.

4. Now we setup the jquery drag drop and slimscroll. I will try to explain each line of the code below.

Then you can run the code via browser. And it will work like the demo.

This way I said it will easier if we use UI draggable and droppable than UI sortable. We can do more custom on the code and add some logic for system needed.

Hope it can help you guys. For the full source please DOWNLOAD HERE. (Drag Drop with Fixed List of Slots)

Have a good day,

Thank you.

Share di:   Email this to someone Share on Facebook Tweet about this on Twitter Share on Google+ Share on LinkedIn

1 Komentar Pada “Drag Drop with Fixed List of Slots and Possible to Scroll

  • May 17, 2015 at 1:58 pm

    Greetings from Carolina! I’m bored at work so I decided to
    browse your blog on my iphone during lunch break. I love the
    information you present here and can’t wait to take
    a look when I get home. I’m shocked at how fast your blog loaded on my mobile ..
    I’m not even using WIFI, just 3G .. Anyhow, superb site!


Tinggalkan Komentar: