Geek Answers Handbook

JQuery does not arrange list items up and down using drag and drop

I want the user to be able to reorder the list in a click event. Here I installed a very simple jsFiddle:

http://jsfiddle.net/8vWXZ/2/

So, in this example, I would like to move the clicked element li and its contents to a position higher in the DOM. I believe that, strictly speaking, it moves down the index of elements li.

This will be expanded later to include buttons that move li items up and down, and a submit button that preserves the order / state of list items.

I found a lot of information about drag and drop (which is not required), but not much about this function. If someone could point me in the right direction, that would be great :)

+4
source share
2 answers

Something you can check is jQuery UI sortable

If you just want to move items by clicking, etc., look at the following methods:

detach function

DOM Functions

$("document").ready(function() { $("#reOrder li").click(function() { var index = $("#reOrder li").index(this); if (index != 0) { // li item is not sitting in the first position $("#reOrder li:eq(" + (index - 1) + ")").before(this); } }); });

Detaching will allow you to remove the selected item from the DOM and will have an available copy, then you can paste it into the desired position using one of the DOM insertion functions.

+3
source 
 $(function() { var $ul = $('ul'); $ul.css({ position: 'relative', height: $ul.height(), width: $ul.width() }); $ul.find('>*').each(function(i, e) { var $e = $(e); $e.data($e.position()); }).each(function(i, e) { var $e = $(e); $e.css({ position: 'absolute', top: $e.data('top'), left: $e.data('left') }); }).click(function(e) { var $e = $(e.target); var $be = $e.prev(); if (!$be.length) return; $be.before($e).stop().animate($e.position()); $e.stop().animate($be.position()); }); });

http://jsbin.com/eduhaf/4/edit

0
source

More articles:


All Articles