Проблема с моим плагином перетаскивания - PullRequest
Новая
       3

Проблема с моим плагином перетаскивания

2 голосов
/ 05 января 2012

Я сейчас разрабатываю плагин Drag n' Drop.Я только что закончил функцию, чтобы люди могли drop элемент draggable на цели.Теперь он отлично работает на jsfiddle:

http://jsfiddle.net/XvZLn/18/

Но как только я внедряю этот код в свой плагин, следующее не будет работать: 

var target = {
    on: function() {
        return $('.drag:first').each(function() {
            $(this).addClass('i');
        });
    },
    off: function() {
        $('.drag:first').removeClass('i');
    }
};

, которыйв моем плагине это выглядит так: 

var targ = {
    on: o.target.onTarget,
    off: o.target.offTarget
};

Оба кода имеют свои цели.Часть on - это функция, которая должна запускаться при полном входе в цель.Часть off - это функция, которая запускается при выходе из цели.

onTarget и offTarget - все параметры в defaults.Причина, по которой мы используем эту переменную, заключается в том, что нам нужен был способ использования function(){}.

Единственный способ, которым я думал, что смогу это сделать, - использовать переменную.Теперь я пытаюсь запустить targ.on() внутри if, который проверяет, находится ли элемент целиком внутри цели.Это не работает.Я знаю, что targ.on() не работает, потому что я добавил предупреждение в if и получил предупреждение, как только элемент попал в цель.

Это полный код, который я использую в своем плагине: 

var locker = o.target.lock;
var lock = false;
var targ = {
    on: o.target.onTarget,
    off: o.target.offTarget
};
$(oj).bind('drag', function (event) {
    var $t = $(this);
    var $con = $(o.target.init);
    if (lock === false) {
        $(this).css({
            top: event.offsetY,
            left: event.offsetX
        });
    }
}).bind('mouseup', function () {
    var $t = $(this);
    var $con = $(o.target.init);
    var sen = 100;
    var otop = $t.offset().top;
    var oleft = $t.offset().left;
    var conw = $con.width();
    var conh = $con.height();
    var cono = $con.offset().top;
    var conl = $con.offset().left;
    var oo = $t.height();
    sen = sen * 2;
    var other = oleft <= conw - (sen / 1.25) && oleft > conl && oleft < conw + conl - (sen / 4);
    if (locker === false) {
        if (otop < conw - (sen / 4) && otop > cono && otop < ((conh + cono) - oo) && other) {
            targ.on();
            lock = false;
        } else {
            targ.off();
            lock = false;
        }
    } else {
        if (otop < conw - (sen / 4) && otop > cono && otop < ((conh + cono) - oo) && other) {
            targ.on();
            $(this).css('cursor', 'default');
            lock = true;
        }
    }
});

Полный код плагина: 

$.setCookie = function(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
};
$.getCookie = function(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
};
$.fn.jDrag = function(options) {
    var getVersion = {
        version: '1.0.0',
        version2: '1.0.0',
        version3: '1.0.1'
    };
    var defaults = {
        revert: false,
        revertDuration: 500,
        ghostDrop: false,
        ghostRevert: false,
        ghostOpacity: '0.50',
        instantGhost: false,
        activeClass: false,
        handle: false,
        grid: false,
        cookies: false,
        cookieExdate: 365,
        radialDrag: false,
        radius: 100,
        circularOutline: false,
        strictMovement: false,
        distance: 0,
        not: false,
        containment: false,
        target: {
            init: false,
            lock: false,
            onTarget: function() {},
            offTarget: function() {}
        },
        onPickUp: function() {},
        onDrop: function() {}
    };
    var o = $.extend(defaults, options);
    $('body').append('<span class="version_usage_neededToReCievever_srion-now" style="display:none;">' + getVersion.version2 + '</span>');
    return this.each(function() {

        //Some Variables
        var oj = this,
            position = $(oj).position(),
            revertLeft = position.left,
            revertTop = position.top,
            yea = 'body',
            onceInawhile = '<b class="getDistanceAsofPosition" style="display:none;">' + o.distance + '</b>';
        if (o.not === oj) {
            o.not = false;
        }
        o.distance = squared(o.distance);
        //alert(o.distance);
        var m;
        var t;
        $(oj).bind('mousedown', function() {
            m = event.pageX;
            t = event.pageY;
            //$('#hi').text(m+' '+t);
        });
        var firstofdrag = '<b class="getnotNoCondition" style="display:none;">"' + o.not + '"</b>';
        if (o.ghostDrop === true) {
            var random = Math.floor(Math.random() * 9999999);
            if (o.ghostRevert === false) {
                o.revert = false;
            }
            if (o.ghostRevert === true) {
                o.revert = true;
            }

            $(document).ready(function() {
                $(oj).clone().attr('id', '').addClass('ghosts').addClass('ghost_starter' + random).css({
                    position: 'absolute',
                    top: revertTop,
                    left: revertLeft,
                    opacity: o.ghostOpacity
                }).appendTo('body');

                $('.ghost_starter' + random).mousedown(function() {
                    if (o.activeClass !== false) {
                        $(this).addClass(o.activeClass);
                    }
                }).bind('mousedown', o.onPickUp).bind('drag', function(event) {
                    if (o.grid !== false) {
                        if (o.not !== false && $(event.target).is(o.not)) {
                            return false;
                        } else {
                            if (o.strictMovement !== false || o.strictMovement === 'horizontal' || o.strictMovement === 'x') {
                                $(this).css('left', Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]);
                            }
                            else if (o.strictMovement !== false || o.strictMovement === 'vertical' || o.strictMovement === 'y') {
                                $(this).css('top', Math.round(event.offsetX / defaults.grid[1]) * defaults.grid[1]);
                            } else {
                                $(this).css({
                                    top: Math.round(event.offsetY / defaults.grid[1]) * defaults.grid[1],
                                    left: Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]
                                });
                            }
                        }
                    }
                    else if (o.containment !== false) {
                        var $div = (o.containment === 'parent') ? $(oj).parent() : ((o.containment === 'parent parent') ? $(oj).parent().parent() : ((o.containment === 'document') ? $(document) : $(o.containment)));
                        var j, b, r;
                        $('.ghost_starter' + random).bind("dragstart", function(event) {
                            j = $div.offset();
                            b = j.top + $div.outerHeight() - $(this).outerHeight();
                            r = j.left + $div.outerWidth() - $(this).outerWidth();
                        }).bind('drag', function(event) {
                            $(this).css({
                                top: Math.min(b, Math.max(j.top, event.offsetY)),
                                left: Math.min(r, Math.max(j.left, event.offsetX))
                            });
                        });
                    }
                    else {

                        if (o.not !== false && $(event.target).is(o.not)) {
                            return false;
                        } else {
                            if (o.strictMovement !== false || o.strictMovement === 'horizontal' || o.strictMovement === 'x') {
                                $(this).css('left', event.offsetX);
                            }
                            else if (o.strictMovement !== false || o.strictMovement === 'vertical' || o.strictMovement === 'y') {
                                $(this).css('top', event.offsetY);
                            } else {
                                $(this).css({
                                    top: event.offsetY,
                                    left: event.offsetX
                                });
                            }
                        }
                    }
                }).bind('mouseup', o.onDrop);
                $(window).mouseup(function() {
                    if (o.activeClass !== false) {
                        $('.ghost_starter' + random).removeClass(o.activeClass);
                    }
                    var gpos = $('.ghost_starter' + random).position(),
                        lft = gpos.left,
                        tp = gpos.top;
                    $(oj).animate({
                        top: tp,
                        left: lft
                    }, 300);
                    if (o.cookies !== false) {
                        var cookies = $('.ghost_starter' + random).position();
                        if (o.cookieExdate === 'browserClose') {
                            $.setCookie('jDrag-Position-Top-Ghost' + $('.ghost_starter' + random).index(), cookies.top);
                            $.setCookie('jDrag-Position-Left-Ghost' + $('.ghost_starter' + random).index(), cookies.left);
                        } else {
                            $.setCookie('jDrag-Position-Top-Ghost' + $('.ghost_starter' + random).index(), cookies.top, o.cookieExdate);
                            $.setCookie('jDrag-Position-Left-Ghost' + $('.ghost_starter' + random).index(), cookies.left, o.cookieExdate);
                        }
                    }
                });

            });

        }
        if (o.distance !== false) {
            $(yea).append(onceInawhile);
        }
        $('body').append('<span class="version_usage_neededToReCievever_srion-future" style="display:none;">' + getVersion.version3 + '</span>');
        if (o.radialDrag === true) {
            $(document).ready(function() {
                if (o.circularOutline === true) {
                    $('head').append('<span class="hi"><div class="circularStyle"></div></span>');
                    $('.circularStyle').html('<style type="text/css">.pointlikeamaster{' + 'position: absolute;height: 4px;width: 4px;' + 'margin: -2px 0 0 -2px;background: #A00;' + '}</style>');
                }
            });
            $(oj).bind('dragstart', function(event) {
                var data = $(this).data('dragcircle');
                if (data) {
                    data.$circle.show();
                }
                else {
                    data = {
                        radius: o.radius,
                        $circle: $([]),
                        halfHeight: $(this).outerHeight() / 2,
                        halfWidth: $(this).outerWidth() / 2
                    };
                    data.centerX = event.offsetX + data.radius + data.halfWidth;
                    data.centerY = event.offsetY + data.halfHeight;
                    // create divs to highlight the path...
                    $.each(new Array(72), function(i, a) {
                        angle = Math.PI * ((i - 36) / 36);
                        data.$circle = data.$circle.add(
                        $('<div class="pointlikeamaster" />').css({
                            top: data.centerY + Math.cos(angle) * data.radius,
                            left: data.centerX + Math.sin(angle) * data.radius
                        }));
                    });
                    $(this).after(data.$circle).data('dragcircle', data);
                }
            }).bind('drag', function(event) {
                var data = $(this).data('dragcircle'),
                    angle = Math.atan2(event.pageX - data.centerX, event.pageY - data.centerY);
                $(this).css({
                    top: data.centerY + Math.cos(angle) * data.radius - data.halfHeight,
                    left: data.centerX + Math.sin(angle) * data.radius - data.halfWidth
                });
            }).bind('dragend', function() {
                $(this).data('dragcircle').$circle.hide();
            });

        } else {
            $(oj).mousedown(function() {
                if (o.activeClass !== false) {
                    $(this).addClass(o.activeClass);
                }
            }).bind('mousedown', o.onPickUp);

            if (o.handle !== false) {
                $(o.handle).mouseover(function() {
                    $(this).css({
                        cursor: 'crosshair'
                    });
                });
                $(oj).bind('dragstart', function(event) {
                    if (o.not !== false && $(event.target).is(o.not)) {
                        return false;
                    } else {
                        return $(event.target).is(o.handle);
                    }
                }).bind('drag', function(event) {
                    if (o.grid !== false) {
                        if (o.not !== false && $(event.target).is(o.not)) {
                            return false;
                        } else {
                            if (o.strictMovement !== false || o.strictMovement === 'horizontal' || o.strictMovement === 'x') {
                                $(this).css('left', Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]);
                            }
                            else if (o.strictMovement !== false || o.strictMovement === 'vertical' || o.strictMovement === 'y') {
                                $(this).css('top', Math.round(event.offsetX / defaults.grid[1]) * defaults.grid[1]);
                            } else {
                                $(this).css({
                                    top: Math.round(event.offsetY / defaults.grid[1]) * defaults.grid[1],
                                    left: Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]
                                });
                            }
                        }
                    }

                    else if (o.containment !== false) {
                        var $div = (o.containment === 'parent') ? $(oj).parent() : ((o.containment === 'parent parent') ? $(oj).parent().parent() : ((o.containment === 'document') ? $(document) : $(o.containment)));
                        var j, b, r;
                        $(oj).bind("dragstart", function(event) {
                            j = $div.offset();
                            b = j.top + $div.outerHeight() - $(this).outerHeight();
                            r = j.left + $div.outerWidth() - $(this).outerWidth();
                        }).bind('drag', function(event) {
                            $(this).css({
                                top: Math.min(b, Math.max(j.top, event.offsetY)),
                                left: Math.min(r, Math.max(j.left, event.offsetX))
                            });
                        });
                    }
                    else {
                        if (o.not !== false && $(event.target).is(o.not)) {
                            return false;
                        } else {
                            if (o.strictMovement !== false || o.strictMovement === 'horizontal' || o.strictMovement === 'x') {
                                $(this).css('left', event.offsetX);
                            }
                            else if (o.strictMovement !== false || o.strictMovement === 'vertical' || o.strictMovement === 'y') {
                                $(this).css('top', event.offsetY);
                            } else {
                                $(this).css({
                                    top: event.offsetY,
                                    left: event.offsetX
                                });
                            }
                        }
                    }
                });
            } else {
                $(oj).bind('drag', function(event) {

                    if (o.grid !== false) {
                        if (o.not !== false && $(event.target).is(o.not)) {
                            return false;
                        } else {
                            if (o.strictMovement !== false || o.strictMovement === 'horizontal') {
                                $(this).css('left', Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]);
                            }
                            else if (o.strictMovement !== false || o.strictMovement === 'vertical') {
                                $(this).css('top', Math.round(event.offsetX / defaults.grid[1]) * defaults.grid[1]);
                            } else {
                                $(this).css({
                                    top: Math.round(event.offsetY / defaults.grid[1]) * defaults.grid[1],
                                    left: Math.round(event.offsetX / defaults.grid[0]) * defaults.grid[0]
                                });
                            }
                        }
                    }
                    else if (o.containment !== false) {
              var $div = (o.containment === 'parent') ? $(oj).parent() : ((o.containment === 'parent parent') ? $(oj).parent().parent() : ((o.containment === 'document') ? $(document) : $(o.containment)));
                        var j, b, r;
                        $(oj).bind("dragstart", function(event) {
                            j = $div.offset();
                            b = j.top + $div.outerHeight() - $(this).outerHeight();
                            r = j.left + $div.outerWidth() - $(this).outerWidth();
                        }).bind('drag', function(event) {
                            $(this).css({
                                top: Math.min(b, Math.max(j.top, event.offsetY)),
                                left: Math.min(r, Math.max(j.left, event.offsetX))
                            });
                        });
                    }
                    else if (o.target.init !== false) {
/*
Use this to adjust the target settings
 $('b').html(otop+' < '+(conw - (sen/4))+' && '+otop+' > '+cono+' && '+otop+' <= '+((conh + cono)-oo)+' && '+oleft+' < '+(conw-(sen/1.25))+' && '+oleft+' > '+conl+' && '+oleft+' < '+(conw + conl-(sen/4)));
        var other = oleft <= conw - (sen/1.25) && oleft > conl && oleft < conw + conl - (sen / 4);
*/
                        var locker = o.target.lock;
                        var lock = false;
                        var targ = {
                            on: o.target.onTarget,
                            off: o.target.offTarget
                        };
                        $(oj).bind('drag', function(event) {
                            var $t = $(this);
                            var $con = $(o.target.init);
                            if (lock === false) {
                                $(this).css({
                                    top: event.offsetY,
                                    left: event.offsetX
                                });
                            }
                        }).bind('mouseup', function() {
                            var $t = $(this);
                            var $con = $(o.target.init);
                            var sen = 100;
                            var otop = $t.offset().top;
                            var oleft = $t.offset().left;
                            var conw = $con.width();
                            var conh = $con.height();
                            var cono = $con.offset().top;
                            var conl = $con.offset().left;
                            var oo = $t.height();
                            sen = sen * 2;
                            var other = oleft <= conw - (sen / 1.25) && oleft > conl && oleft < conw + conl - (sen / 4);
                            if (locker === false) {
                                if (otop < conw - (sen / 4) && otop > cono && otop < ((conh + cono) - oo) && other) {
                                    targ.on();
                                    lock = false;
                                } else {
                                    targ.off();
                                    lock = false;
                                }
                            } else {
                                if (otop < conw - (sen / 4) && otop > cono && otop < ((conh + cono) - oo) && other) {
                                    targ.on();
                                    $(this).css('cursor', 'default');
                                    lock = true;
                                }
                            }

                        });
                    } else {
                        if (o.not !== false && $(event.target).is(o.not)) {
                            return false;
                        } else {
                            if (o.strictMovement !== false || o.strictMovement === 'horizontal') {
                                $(this).css('left', event.offsetX);
                            }
                            else if (o.strictMovement !== false || o.strictMovement === 'vertical') {
                                $(this).css('top', event.offsetY);
                            } else {
                                $(this).css({
                                    top: event.offsetY,
                                    left: event.offsetX
                                });
                            }
                        }
                    }
                });
            }

            $(oj).bind('mouseup', o.onDrop);
            $(window).mouseup(function() {
                if (o.activeClass !== false) {
                    $(oj).removeClass(o.activeClass);
                }
                if (o.revert === true) {
                    $(oj).animate({
                        top: revertTop,
                        left: revertLeft
                    }, o.revertDuration);
                }
                if (o.cookies !== false) {
                    var cookies = $(oj).position();
                    if (o.cookieExdate === 'browserClose') {
                        $.setCookie('jDrag-Position-Top' + $(oj).index(), cookies.top);
                        $.setCookie('jDrag-Position-Left' + $(oj).index(), cookies.left);
                    } else {
                        $.setCookie('jDrag-Position-Top' + $(oj).index(), cookies.top, o.cookieExdate);
                        $.setCookie('jDrag-Position-Left' + $(oj).index(), cookies.left, o.cookieExdate);
                    }
                }
            });
        }
        if (o.not !== false) {
            $(yea).append(firstofdrag);
        }
        $('body').append('<span class="version_usage_neededToReCievever_srion-past" style="display:none;">' + getVersion.version + '</span>');
        if (o.instantGhost === true) {
            window.setInterval(function() {
                var gpos = $('.ghost_starter' + random).position(),
                    lft = gpos.left,
                    tp = gpos.top;
                $(oj).stop(true, false).animate({
                    top: tp,
                    left: lft
                }, 200);
            }, 200);
        }
        //End normal Dragging
        //End Tags
        if (o.cookies === false) {
            $(function() {
                var oj = this;
                if (o.ghostDrop === true) {
                    var savedLeftPosition = $.getCookie('jDrag-Position-Left-Ghost' + $(oj).index()),
                        savedTopPosition = $.getCookie('jDrag-Position-Top-Ghost' + $(oj).index());
                    $(oj).css({
                        left: savedLeftPosition + 'px',
                        top: savedTopPosition + 'px'
                    });
                    $('.ghost_starter' + random).css({
                        left: savedLeftPosition + 'px',
                        top: savedTopPosition + 'px'
                    });
                }
            });
        } else {
            var savedLeftPosition1 = $.getCookie('jDrag-Position-Left' + $(oj).index()),
                savedTopPosition1 = $.getCookie('jDrag-Position-Top' + $(oj).index());
            $(oj).css({
                left: savedLeftPosition1 + 'px',
                top: savedTopPosition1 + 'px'
            });
        }

    });
};

Мне пришлось оставить верхнюю часть плагинапотому что он сказал мне, что есть ограничение в 30000 символов.Пример: http://jsfiddle.net/ZDUZL/84/

Я не уверен, в чем проблема, и я не уверен, слишком много информации или нет.Спасибо за любую помощь.

1 Ответ

0 голосов
/ 05 января 2012

Это работает в вашем первом jsFiddle, потому что вы полагаетесь на смещение непосредственно от объекта события перетаскивания: 

$('.drag').bind('drag', function(event) {
    var $t = $(this);
    var $con = $('#container');
    if (lock === false) {
        $(this).css({
            top: event.offsetY, // coordinates directly from event object
            left: event.offsetX
        });
    }
})...

В полном коде плагина вы получаете смещение в обратном вызове события dragstart, а затемпопытаться сослаться на него из обратного вызова события перетаскивания.Проблема заключается в том, что это событие драгстарта не запускается (или, во всяком случае, не в нужное время или на соответствующем элементе).Когда обратный вызов перетаскивания ищет значения, они не определены, и ваш скрипт останавливается из-за ошибки.См. Здесь для справки: 

var $div = (o.containment === 'parent') ? $(oj).parent() : ((o.containment === 'parent parent') ? $(oj).parent().parent() : ((o.containment === 'document') ? $(document) : $(o.containment)));

var j, b, r;

$('.ghost_starter' + random).bind("dragstart", function(event) { // this event isn't being triggered (or at least not at the right time or on the right element)...
  j = $div.offset();
  b = j.top + $div.outerHeight() - $(this).outerHeight();
  r = j.left + $div.outerWidth() - $(this).outerWidth();
}).bind('drag', function(event) {               
  $(this).css({
    top: Math.min(b, Math.max(j.top, event.offsetY)), // ...so b, j, and r aren't defined here
    left: Math.min(r, Math.max(j.left, event.offsetX))
  });
});

Исправьте этот триггер dragstart или получите смещение в противном случае, и вы будете установлены.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...