Geek Answers Handbook

Drag and Drop Logic

I am wondering how this works and how it should be designed and implemented on the side of the basic drag and drop function.

I have not yet implemented such functionality. I plan to do this for one of my projects, and I have some ideas on how to implement it. I wanted to make sure that I was on the right track and that you most likely have something to say about this too ...

Suppose I have 5 elements listed as following and taken from a database;

<div id="1">this is content for 1</div> <div id="2">this is content for 2</div> <div id="3">this is content for 3</div> <div id="4">this is content for 4</div> <div id="5">this is content for 5</div>

since it is deleted from the database, we know that it has a "sequence" or "order" field to distinguish the order that we are going to display. Assume also that currently the values ​​of the sequence column are the same as the section identifiers. so: 1,2,3,4 and 5 respectively.

My question and thoughts;

If I drag div 4 and drop it between 1 and 2; What are the steps from there? For instance:

1) define the id of the div that is being dragged (let this div-a )

2) define the id of the div that div-a is inserted after (or earlier) in this case after and therefore after div id 1 (let this div-b )

3) Update the div-a sequence in db and set it to the current div-b sequence

after this step I got confused ... I consider all divs and according to which I have ever ordered divs, do I update db accordingly? or am I completely wrong, and is there any other way?

Thanks for the answers, but I know that there are plugins and other things to do this, but I'm only interested in its logical part.

+4
source share
3 answers

I believe jquery gives you a way to grab your id based order?

The way I did this is that every time an action occurs, it captures the current order, sends it back to my application via ajax. Then my application simply analyzes the identifiers from what it was given and updates each order value.

+1
source

http://jqueryui.com/demos/sortable/

  $("#col1").sortable({ placeholder: "top", forcePlaceholderSize: true, revert: true, update: function() { $.ajax({ type: "GET", url: "/request.php", data: "data="+$(this).sortable("toArray")+"", success: function(msg){ } }); } });

toArray is the sequence of your div ids

+1
source

If you are not doing this for your own education, I would suggest you use jQueryUI.

It has a drag and drop function and, among other things, that will probably help you with the wit of DaD, which will allow you to implement parts specific to your problem.

0
source

More articles:


All Articles