如何同步调用克隆元素上的拖动事件?

时间:2011-09-06 06:12:12

标签: javascript jquery triggers drag-and-drop

我要拖动克隆元素,但我不明白如何同步调用触发事件

我的例子http://jsfiddle.net/CfSMG/4/

正确示例http://jqueryui.com/demos/droppable/#photo-manager

向上: 感谢所有我已resolved问题

1 个答案:

答案 0 :(得分:0)

我的解决方案:

$('#move').mousedown(function(event) {
    var offset =  $(this).offset(),
        map = {
            position: 'absolute',
            top : offset.top + 'px',
            left : offset.left + 'px',
            zIndex : 100
        };

    if($('.foo')[0]) return this;

    $(this).clone().bind('mousedown mousemove', function(event) {
        var _this = $(this),
            offset = _this.position(),
            _event = event;

        $(document).bind({
             mousemove : function(event) {
                 var axis = function(i) {
                     var page = {
                         top : 'pageY',
                         left : 'pageX'
                     }[i];
                     return event[page] - (_event[page] - offset[i]) + 'px';
                 };
                _this.css({
                    left : axis('left'),
                    top : axis('top')
                }).unbind('mousemove');
              },
             mouseup : function() {
                _this.animate(map, function() {
                    $(this).remove();
                });
                $(this).unbind('mousemove');
             }
        });
    }).addClass('foo').css(map).appendTo('body');

    event.preventDefault();
    event.stopPropagation();
});

现场演示:jsFiddle