问题描述
|
所有,
我对JavaScript非常陌生,这是我第一次尝试使用YUI 3.0框架。我正在尝试创建一些东西,当我将\'player \'div拖动到\'slot / drop \'div上,然后弹出警报,告诉我项目编号和拖动的div和drop目标中的一些其他属性(插槽/放下)。我可以使警报适用于拖动的div,但在引用放置目标div并获取其属性时遇到了困难。有人可以帮忙吗?如果您需要更多信息,请告诉我。
我之所以需要它,是因为我有多个放置目标,并且需要找出放置在哪个特定目标上。
感谢您的帮助!
YUI({ filter: \'raw\' }).use(\'dd-drop\',\'dd-proxy\',\'dd-constrain\',\'dd-ddm-drop\',function(Y) {
var slots = Y.one(\'#workarea\').all(\'.slot\');
Y.each(slots,function(v,k) {
var id = v.get(\'id\'),groups = [\'two\'];
switch (id) {
case \'t1\':
case \'t2\':
groups = [\'one\'];
break;
}
var drop = new Y.DD.Drop({
node: v,groups: groups
});
});
var players = Y.one(\'#workarea\').all(\'.player\');
Y.each(players,groups = [\'one\',\'two\'];
switch (id) {
case \'pt1\':
case \'pt2\':
groups = [\'one\'];
break;
case \'pb1\':
case \'pb2\':
groups = [\'two\'];
break;
}
var drag = new Y.DD.Drag({
node: v,groups: groups,dragMode: \'intersect\'
}).plug(Y.Plugin.DDProxy,{
moveOnEnd: false
}).plug(Y.Plugin.DDConstrained,{
constrain2node: \'#workarea\'
});
drag.on(\'drag:start\',function() {
var p = this.get(\'dragNode\'),n = this.get(\'node\');
n.setStyle(\'opacity\',.25);
if (!this._playerStart) {
this._playerStart = this.nodeXY;
}
p.set(\'innerHTML\',n.get(\'innerHTML\'));
p.setStyles({
backgroundColor: n.getStyle(\'backgroundColor\'),color: n.getStyle(\'color\'),opacity: .65
});
});
drag.on(\'drag:end\',function() {
var n = this.get(\'node\');
n.setStyle(\'opacity\',\'1\');
var project_number = n.getAttribute(\'project_number\');
var div_number= n.getAttribute(\'div_number\');
alert ( \"! \" + project_number + \" ! \" + track_number + \" ! \");
self.location=\'project.PHP?project=\' + project + \'&div_id=\' + div_number; [/code]
});
drag.on(\'drag:drophit\',function(e) {
var xy = e.drop.get(\'node\').getXY();
this.get(\'node\').setXY(xy);
});
drag.on(\'drag:dropmiss\',function(e) {
if (this._playerStart) {
this.get(\'node\').setXY(this._playerStart);
this._playerStart = null;
}
});
});
});
解决方法
在drag.on drag:drophit方法中添加以下内容:
var target = e.drop.get(\'node\');
所以现在看起来像:
drag.on(\'drag:drophit\',function(e) {
var xy = e.drop.get(\'node\').getXY();
this.get(\'node\').setXY(xy);
var target = e.drop.get(\'node\');
});
如果您警告(target._node.id)(在该方法的范围内),则将具有放置目标的ID。
要仔细查看目标对象,请使用控制台并将其吐出,如下所示:
console.log(target);
您需要使用Chrome,或安装FireBug插件才能使console.log正常工作。没有这些,JavaScript渲染就会崩溃。
您应该能够将该代码段添加到任何drag.on方法中。