Javascript 我的拖放插件有问题
我目前正在开发一个Javascript 我的拖放插件有问题,javascript,jquery,variables,drag-and-drop,Javascript,Jquery,Variables,Drag And Drop,我目前正在开发一个Drag n'Drop插件。我刚刚完成了一项功能，因此人们可以将draggable项放到目标上。现在，它在JSFIDLE上可以完美地工作： 但是，一旦我将该代码实现到插件中，以下代码就不起作用了： var target = { on: function() { return $('.drag:first').each(function() { $(this).addClass('i'); }); },
Drag n'Drop将draggable
项放到目标上。现在，它在JSFIDLE上可以完美地工作：
但是，一旦我将该代码实现到插件中，以下代码就不起作用了：
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
};
这两种代码都有其目的。是当您一直输入目标时，假定要启动的功能。off
部分是离开目标时启动的功能
onTarget
和offTarget
都是默认值中的选项。
我们之所以使用这个变量，是因为我们需要一种使用function（）{}
的方法
我认为我能做到这一点的唯一方法是使用var。
现在我尝试在if中启动target.on（）
，检查元素是否完全在目标中。这是行不通的。我知道target.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;
}
}
});
var locker=o.target.lock；
var-lock=false；
var targ={
on:o.target.onTarget，
关闭：o.target.offTarget
};
$（oj）.bind（'drag'，函数（事件）{
var$t=$（本）；
var$con=$（o.target.init）；
如果（锁===false）{
$（this.css）({
顶部：event.offsetY，
左：event.offsetX
});
}
}).bind（'mouseup'，函数（）{
var$t=$（本）；
var$con=$（o.target.init）；
var-sen=100；
var otop=$t.offset（）.top；
var oleft=$t.offset（）.左；
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；
其他变量=oleft conl&&oleftcono和&otop<（（conh+cono）-oo）和其他）{
target.on（）；
锁=假；
}否则{
目标关闭（）；
锁=假；
}
}否则{
如果（otopcono和&otop<（（conh+cono）-oo）和其他）{
target.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'
});
}
});
};
$.setCookie=函数（c_名称、值、exdays）{
var exdate=新日期（）；
exdate.setDate（exdate.getDate（）+exdays）；
var c_value=escape（value）+（exdays==null）？“”：“expires=“+exdate.toutString（））；
document.cookie=c_name+“=”+c_值；
};
$.getCookie=函数（c_名称）{
变量i，x，y，ARRcookies=document.cookie.split（“；”）；
对于（i=0；i<0.length；i++）{
x=ARRcookies[i].substr（0，ARRcookies[i].indexOf（“=”）；
y=ARRcookies[i].substr（ARRcookies[i].indexOf（“=”）+1）；
x=x.replace（/^\s+|\s+$/g，”）；
如果（x==c_名称）{
返回unescape（y）；
}
}
};
$.fn.jDrag=函数（选项）{
变量getVersion={
版本：“1.0.0”，
版本2:'1.0.0'，
版本3:'1.0.1'
};
var默认值={
回复：false，
持续时间：500，
鬼魂：错，
戈斯特里弗特：错，
GHO产能：“0.50”，
InstantHost:false，
activeClass:false，
句柄：false，
网格：错误，
曲奇：错，
cookieExdate:365，
radialDrag:错，
半径：100，
第二行：错，
运动：错，
距离：0，
不是：错，
遏制:假,，
目标：{
init:false，
洛克：错，
onTarget:function（）{}，
offTarget:function（）{}
},
onPickUp:function（）{}，
onDrop:function（）{}
};
var o=$.extend（默认值、选项）；
$（'body'）.append（“”+getVersion.version2+“”）；
返回此值。每个（函数（）{
//一些变量
var oj=此，
位置=$（oj）.position（），
revertLeft=位置。左，
回复顶部=位置。顶部，
yea=‘body’，
onceInawhile=''+o.distance+''；
如果（o.not==oj）{
o、 not=假；
}
o、 距离=平方（o.距离）；
//警报（o.距离）；
var-m；
变量t；
$（oj）.bind（'mousedown'，function（）{
m=event.pageX；
t=event.pageY；
//$（'#hi'）。文本（m+''+t）；
});
var firstofdrag='“+o.not+'”；
if（o.ghostDrop==真）{
var random=Math.floor（Math.random（）*999999）；
如果（o.ghostRevert==false）{
o、 回复=假；
}
如果（o.ghostRevert==真）{
o、 回复=真；
}
$（文档）.ready（函数（）{
$（oj）.clone（）.attr（'id'，''）.addClass（'ghosts'）.addClass（'ghost\u starter'+random）.css({
位置：'绝对'，
顶部：顶部，
左:左,，
不透明度：o.Ghotocapacity
}).附于（“主体”）；
$（'.ghost\u starter'+random）.mousedown（函数（）{
如果（o.activeClass！==false）{
$（this.addClass（o.activeClass）；
}
}).bind（'mousedown'，o.onPickUp）.bind（'drag'，函数（事件）{
如果（o.grid！==false）{
if（o.not！==false&&$（event.target）.is（o.not））{
返回false；
}否则{
如果（o.strictMovement！==false | | o.strictMovement==='horizontal'| | o.strictMovement==='x'）{
$（this.css（'lef
$('.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
});
}
})...
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))
});
});