我在Html文件中有一个标准模板,如:
<template name="cards">
{{#each all_cards}}
{{> card_item}}
{{/each}}
</template>
<template name="card_item">
<div class="card" style="left:{{position.x}}px; top:{{position.y}}px">
{{title}}
</div>
</template>
我想让卡(css选择器.card)变得可以用JQuery拖动.现在,由于Meteor使用模板自动更新DOM,我何时以及如何知道在哪里调用.draggable()？
编辑:这是迄今为止我的解决方案,使其他客户端的待定移动可见与摆动动画(使用CSS3):
Template.card_item.events = {
'mouseover .card': function (e) {
var $target = $(e.target);
var $cardContainer = $target.hasClass('card') ? $target : $target.parents('.card');
$cardContainer.draggable({containment: "parent", distance: 3});
},
'dragstart .card': function (e) {
Session.set("dragging_id", e.target.id);
$(e.target).addClass("drag");
pos = $(e.target).position();
Events.insert({type: "dragstart", id:e.target.id, left: pos.left, top: pos.top});
},
'dragstop .card': function (e) {
pos = $(e.target).position();
Events.insert({type: "dragstop", id:e.target.id, left: pos.left, top: pos.top});
Cards.update(e.target.id, {$set: {left:pos.left, top:pos.top}});
Session.set("dragging_id", null);
}
}
Events.find().observe({
added: function(event) {
if (event.type == "dragstart" && !Session.equals("dragging_id", event.id)) {
$("#"+event.id).draggable({disabled: true});
$("#"+event.id).addClass("wobble");
}
if (event.type == "dragstop" && !Session.equals("dragging_id", event.id)) {
$("#"+event.id).animate({left: event.left, top: event.top}, 250);
Events.remove({id:this.id});
$("#"+event.id).draggable({disabled: false});
}
}
});
编辑:这种方法似乎不适用于最新版本的Meteor,例如v0.5.0.请参阅下面的评论.
看起来我们正在做类似的事情!我有一个简单的Magic:The Gathering应用程序的概念工作证明.这是我现在实施的拖动方式:
在<head>您的一个html文件的一个部分中,包含jQuery UI脚本:
<script src="jquery-ui-1.8.20.custom.min.js"></script>
然后,在js文件中,确保元素在鼠标悬停时变得可拖动(注意:这在触摸屏上是次优的,因为它需要两次触摸才能拖动...我正在寻找更好的触摸屏解决方案):
Template.card_item.events['mouseover .card, touchstart .card'] = function (e) {
var $target = $(e.target);
if (!$target.data('isDraggable')) {
$target.data('isDraggable', true).draggable();
}
};
最后,处理drag和dragstop事件:
var prevDraggedTime = 0
Template.card_item.events['drag .card'] = function (e) {
// get the cardId from e
var now = new Date().getTime();
var position;
if (now - prevDraggedTime > 250) {
position = $(e.target).position();
Cards.update(cardId, {$set: {x: position.top, y: position.left}});
prevDraggedTime = now;
}
}
Template.card_item.events['dragstop .card'] = function (e) {
// get the cardId from e
var position = $(e.target).position();
Cards.update(cardId, {$set: {x: position.top, y: position.left}});
}
| 归档时间： |
|
| 查看次数： |
3985 次 |
| 最近记录： |