Question

I have been told to get a UI effect done what should be like this:

first:

• two or three column on the page ,and a lot of elem(eg:div) in every
  column,
• and all these elems inside the column should be draggable,and
  meantime the column should automatically sort all the element.

second:

• when dragging an element form one column to another,the dragged
  element should be move to the column my cursor point to,
• and when drop this elem, there should be a effect that one of the
  elems around the dropped elem will animated ‘position’ to the
  place where the original dragged elem is.

enableDrag function I found is like this:

function enableDragging(ele) {

    var dragging = dragging || false,
        x, y, Ox, Oy,
        current;
        enableDragging.z = enableDragging.z || 1;
    ele.onmousedown = function(ev) {
        current = ev.target;
        current.style.position = "absolute";
        dragging = true;
        x = ev.clientX;
        y = ev.clientY;
        Ox = current.offsetLeft;
        Oy = current.offsetTop;
        current.style.zIndex = ++enableDragging.z;
        console.log(dragging);

        window.onmousemove = function(ev) {
            if (dragging == true) {
                var Sx = ev.clientX - x + Ox,
                    Sy = ev.clientY - y + Oy;
                current.style.top = Sy + "px";
                current.style.left = Sx + "px";
                return false;
            }
        };
        window.onmouseup = function(ev) {
            dragging && (dragging = false);
        }
    };
}

but how should I move on, I have actually no idea to get position of the elem what will be replace where the original dragged elem is…

Mainly, I want to all this effect written in raw Javascript, but jQuery is alse fine!

I am new to JS and this is most big project I should figure out!

Can anyone help me with this?

Answer 1

Have you tried the jQuery UI “sortable” widget? It sounds like it does most of what you need.

See in particular the “connected list” demonstration.