2
我目前正在開發一個Drag n' Drop插件。我剛剛完成了一項功能，因此人們可以在目標上輸入dropdraggable項目。現在，它完美的作品上的jsfiddle：我的拖放插件問題
但是，一旦我實現了代碼到我的插件以下不會工作：
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()如果檢查元素是否在目標內部。這不起作用。我知道targ.on()不工作，因爲我在if和and中增加了一個警報，並且當元素進入目標後我得到警報。
這個完整的代碼，我在我的插件使用方法：
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/
林不知道是什麼問題，我不知道這是否太多的信息。謝謝你的幫助。
你能否提供整個插件代碼和使用插件的示例鏈接？ – 2012-01-05 01:59:10
整個插件代碼超過600行 – Shawn31313 2012-01-05 02:05:27
@ Shawn31313它會自動放入滾動條，所以它不會使這個頁面過長。 – Nathan 2012-01-05 02:06:22