YUI 3.0拖放，获得Drop目标属性
|
所有，
我对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, function(v, k) {
var id = v.get(\'id\'), 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;
}
});
});
});
没有找到相关结果
已邀请:
1 个回复
醒荒捆府绣
所以现在看起来像：drag.on(\'drag:drophit\', function(e) { var xy = e.drop.get(\'node\').getXY(); this.get(\'node\').setXY(xy); var target = e.drop.get(\'node\'); });您需要使用Chrome，或安装FireBug插件才能使console.log正常工作。没有这些，JavaScript渲染就会崩溃。 您应该能够将该代码段添加到任何drag.on方法中。