0

I have a problem with position of droped elements fron a dragable list.

$(document).ready(function() {
    $('.fw-sidebar li').draggable({
        cursor: "crosshair",
        revert: "invalid"
    });

    function enableDraggable( el ){
        $( el ).draggable({
            containment: ".fw-content",
            cursor: "help",
            grid: [ 80, 80 ]
        }).css('position', 'absolute');
    }


    $(".fw-content").droppable({
        accept: ".fw-sidebar li, .fw-content li",
        drop: function(event, ui) {
            //console.log(event);

            $(this).removeClass("border").removeClass("over");

            var dropped = ui.draggable;
            var droppedOn = $(this).find('ul');

            $(dropped).detach().appendTo(droppedOn);

            enableDraggable( dropped );
        },
        over: function(event, elem) {
            console.log("over");
            $(this).addClass("over");
        },
        out: function(event, elem) {
            $(this).removeClass("over");
        }
    });

});

http://jsfiddle.net/96t0qwmg/2/

I want to make a dragable list to drop in a container some elements, then to arrange them in a grid.

1) In my example, when i drop links from sidebar to container, they not fixed where i want.

2) Then, when i move 2 or 3 link in content.. they not align to a grid as it supposed to. Could not align two links on same row.

Anyone know where i'm wrong?

Thanks!

oriceon
  • 359
  • 2
  • 6
  • 17

1 Answers1

0

Change the function to this

function enableDraggable( el ){
   $( el ).draggable({
       containment: ".fw-content",
       cursor: "help",
       grid: [ 80, 80 ]
   }).css({'position': 'relative','left':'', 'top':''});
}

JsFiddle

answer99
  • 251
  • 1
  • 13
  • Thanks but in container, i need elements to be draggable. To rearrange them anywhere. And need them to be droped exatly where i drag them. Not on left, top. It`s about a floor plan. I have some elements in sidebar and drag them and arrange as i need in container. – oriceon Jul 07 '15 at 11:53
  • u need to drag the draggable elements or the droppable elements?? – answer99 Jul 07 '15 at 11:56
  • I need draggable elements from sidebar. To drop them into droppable (because later i need to save them in a json and reload exatly in droppable container). Then from droppablle to be draggable to arrange them as i need in container where they dropped. – oriceon Jul 07 '15 at 11:57
  • so nobody know an answer? :| – oriceon Jul 07 '15 at 17:26