Question

So, I have two problems:

1. Why is this });//]]> at the top of the page in jsfiddle.

2. Second, the real issue, How can I change the drop zone of the jQuery sortable object to reflect where the mouse is. So what I mean is, It should not matter where you drag the sortable from (extreme top left corner or bottom right) but instead only rely on if the mouse is over tab1 or tab2 to be dropped.

Currently, the center of the sortable has to be over tab1 or tab2.

var $tab_items = $("ul:first li", $tabs).droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function (event, ui) {
        var $item = $(this);
        var $list = $($item.find("a").attr("href"))
            .find(".connectedSortable");

        ui.draggable.hide("slow", function () {
            $tabs.tabs("select", $tab_items.index($item));
            $(this).appendTo($list).show("slow");
        });
    }
});

I am fairly new to JavaScript and jQuery. I think that drop: function( event, ui ) { is definitely where i should be looking. Any insight into this would be greatly appreciated.

http://jsfiddle.net/justinmvail/LARnD/

Answer 1

$('selector').droppable({ tolerance: "pointer", ...

See this fiddle

You’ll want to set the tolerance option for draggable.

The script tags in the fiddle caused the strange characters.