Jquery drag and drop on tabs

Question

I have 4 tabs and a products list. What I need is to be able move those items from the list to each one of those tabs. The problem I have is that when I start dragging and hover over tab 1 it shows up the domId of the 3rd tab or 4th sometimes even its own domId too and if I drag and hover over 2nd tab, it shows the 4th tab id. Not sure why this is happening. I tried it on a completely separate html page too.

Here is the jsfiddle sample code url

Answer 1

You need to move the code that changes width to 50px into the start function instead of the drag function.

    start: function (event, ui) {

        $(this).css({
            'width':'50px',
            'z-index': '50'
        });
    }

The create method, drag method, and rel_left and rel_top variables aren't needed either. The reason is that draggable needs a width when it starts, by the time it runs the draggable method its still thinking that width is 100%, which is throwing things off.

http://jsfiddle.net/3em7obvL/2/