想要使用jquery实现拖放功能

Question

我希望实现与this site相同的功能，当您选择一个珠子时，它应该从滚动窗格div拖动到另一个具有手镯图像的div，以便用户可以创建他/她自己的手镯。并且他可以移除珠子，将其重新放置在手镯上并调整大小。

我试图实现，但是当我试图将珠子放在手镯上时它会卡在一个点上，它不会附着在它上面。

这是我的代码

<section>
    <div class="thumbs">    
        <a href="#" class="ablah1"> 
            <img id="blah1" class="i2" src="C14mm300.png" width="100%" height="100px" style="padding:10px;"/>
        </a>
        <a href="#" class="ablah2"> 
            <img id="blah2" class="i3" src="C17mm415.png" width="100%" height="100px" style="padding:10px;"/>
        </a>
        <a href="#" class="ablah3"> 
            <img id="blah3" class="i4" src="C25mm525.png" width="100%" height="100px" style="padding:10px;"/>
        </a>
        <a href="#" class="ablah4"> 
            <img id="blah4" class="i5" src="C32mm580.png" width="100%" height="100px" style="padding:10px;"/>
        </a>
        <a href="#" class="ablah3"> 
            <img id="blah3" class="i4" src="C32mm660.png" width="100%" height="100px" style="padding:10px;"/>
        </a>
        <a href="#" class="ablah4"> 
            <img id="blah4" class="i5" src="c38mm710.png" width="100%" height="100px" style="padding:10px;"/>
        </a>
    </div>
    <div id="dvSource" style="visibility:hidden;width:600px;height:50px;overflow:scroll;">
        <img alt="" src="s1.jpg" />
        <img alt="" src="s2.jpg" />
        <img alt="" src=" C14mm300.png" />
        <img alt="" src="C17mm415.png" />
        <img alt="" src="s3.jpg" />
    </div>
    <hr />
    <div id="dvDest">
        <a href="#" class="ablah">
            <img id="blah" class="i1" src="" style="position:relative;top:50px;float:left;left:0px;width:150%;height:50px;"/>
        </a>
    </div>
</section>

$(function () {
    $("#dvSource img").draggable({
        revert: "invalid",
        refreshPositions: true,

        drag: function (event, ui) {
            ui.helper.addClass("draggable");
        },
        stop: function (event, ui) {
            ui.helper.removeClass("draggable");
            var image = this.src.split("/")[this.src.split("/").length - 1];
            if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
                alert(image + " dropped.");
            } else {
                alert(image + " not dropped.");
            }
        }
    });
    $("#dvDest").droppable({

        overflow: true,
        drop: function (event, ui) {
            if ($("#dvDest img").length == 0) {
                $("#dvDest").html("");
            }
            ui.draggable.addClass("dropped");
            ui.draggable.css('position', 'absolute');
            $("#dvDest").append(ui.draggable);
        }
    });
});

http://jsfiddle.net/6yyta3g7/

请有人帮我分类。