draganddrop.js

$(function() {
    var $draggingElement = null,
        $document = $(document),
        $dropA = $('#dropzonea'),
        $dropB = $('#dropzoneb'),
        $dropCancel = $('#textwordscontainer'),
        downHandler = function(e) {
            $draggingElement = $(this);
            $draggingElement.addClass('dragging').css({
                left: e.pageX - $draggingElement.width() / 2,
                top: e.pageY + 2
            });

            e.preventDefault();
        },
        moveHandler = function(e) {
            if ($draggingElement)
            {
                $draggingElement.css({
                    left: e.pageX - $draggingElement.width() / 2,
                    top: e.pageY + 2
                });
            }

            e.preventDefault();
        },
        upHandler = function(e) {
            var $selectedA,
                $selectedB;

            if ($draggingElement)
            {
                $draggingElement.removeClass('dragging');
                $draggingElement.get(0).style.left = '';
                $draggingElement.get(0).style.top = '';
                $draggingElement = null;

                $selectedA = $dropA.find('.textword');
                $selectedB = $dropB.find('.textword');

                if ($selectedA.size() > 0 && $selectedB.size() > 0)
                {
                    $('#description').show();
                    $('#displayCount').text($selectedA.first().data('count') || '0');
                    $('#displayWordA').text('"' + $selectedA.first().data('word') + '"');
                    $('#displayWordB').text('"' + $selectedB.first().data('word') + '"');
                }
                else
                {
                    $('#description').hide();
                }
            }
        },
        hoverHandler = function(e)
        {
            var $target = $(e.target),
                $closestDrop;

            $('.hovering').removeClass('hovering');

            if ($draggingElement)
            {
                $target = $(e.target);
                $closestDrop = $target.closest('.dropzone');

                if ($closestDrop.size() > 0 && $closestDrop.children().size() === 0)
                {
                    $closestDrop.append($draggingElement.get(0));
                    $closestDrop.addClass('hovering');
                }
                else
                {
                    $draggingElement.appendTo($dropCancel);
                }
            }
        },
        submitHandler = function(e)
        {
            var $selectedA = $dropA.find('.textword'),
                $selectedB = $dropB.find('.textword'),
                errors = [],
                error;

            $('#errors').empty();

            if ($selectedA.size() > 0 && $selectedB.size() > 0)
            {
                $('#keywordA').val($selectedA.first().data('id'));
                $('#keywordB').val($selectedB.first().data('id'));
            }
            else
            {
                errors.push('You must select two lists two merge');
            }

            if (errors.length)
            {
                while (error = errors.shift())
                {
                    $('#errors').append('<p>' + error + '</p>');
                }

                return false;
            }
        };

    $('.textword').bind('mousedown', downHandler);
    $document.bind('mousemove', moveHandler);
    $document.bind('mouseup', upHandler);
    $document.bind('mouseover', hoverHandler);
    $('#mergeForm').submit(submitHandler);

    $('.dropzone').hover()
});