Drag and drop 主干网简单使用拖放
我在主干应用程序中使用默认拖放,我在我的视图中侦听事件,如下所示:Drag and drop 主干网简单使用拖放,drag-and-drop,backbone.js,Drag And Drop,Backbone.js,我在主干应用程序中使用默认拖放,我在我的视图中侦听事件,如下所示: "drop img.big-objet": "dragDropEvent", "dragenter img.objet": "dragEnterLeaveEvent", "dragleave img.big-objet": "dragEnterLeaveEvent", "mousedown img.big-objet": "dragStartEvent", "mouseup img.big-objet": "dragStopEv
"drop img.big-objet": "dragDropEvent",
"dragenter img.objet": "dragEnterLeaveEvent",
"dragleave img.big-objet": "dragEnterLeaveEvent",
"mousedown img.big-objet": "dragStartEvent",
"mouseup img.big-objet": "dragStopEvent",
"dragend img.big-objet": "dragStopEvent",
使用关联的方法
dragEnterLeaveEvent: function (event){
object = $(event.target);
object.addClass('hidden');
$('#'+object.attr('data-toggle')).removeClass('hidden');
},
dragStartEvent: function (event) {
object = $(event.target);
object.addClass('objet-drag').removeClass('objet-hover');
},
dragStopEvent: function (event) {
object = $(event.target);
object.addClass('objet-hover').removeClass('objet-drag');
},
objectHover: function(event){
object = $(event.target);
object.addClass('hidden');
$('#'+object.attr('data-toggle')).removeClass('hidden');
},
dragDropEvent: function(event){
alert('banana');
}
和关联的html
<img class="objet" id="small-objet01-level01" data-toggle="big-objet01-level01" src="img/content/small-objet01-level01.png" alt="" />
<img class="objet" id="small-objet02-level01" data-toggle="big-objet02-level01" src="img/content/small-objet02-level01.png" alt="" />
<img class="objet" id="small-objet03-level01" data-toggle="big-objet03-level01" src="img/content/small-objet03-level01.png" alt="" />
<img class="big-objet objet-hover hidden" id="big-objet01-level01" draggable="true" data-toggle="small-objet01-level01" src="img/content/big-objet01-level01.png" alt="" />
<img class="big-objet objet-hover hidden" id="big-objet02-level01" draggable="true" data-toggle="small-objet02-level01" src="img/content/big-objet02-level01.png" alt="" />
<img class="big-objet objet-hover hidden" id="big-objet03-level01" draggable="true" data-toggle="small-objet03-level01" src="img/content/big-objet03-level01.png" alt="" />
我的所有事件都正常工作,但不是drop事件。因此,我的问题是如何使其工作?快速浏览一下,您似乎缺少了“objectHover”后面的逗号。通过使用JQuery UI库而不是HTML5拖放来修复 我将其放在渲染方法中:
$('#overlay-objet img').droppable({
tolerance: 'pointer',
drop: _.bind(function(event, ui) {
object = $(event.target);
if (object.attr("data-val") != undefined){
objectDrag = object.attr('data-val').toString();
objectDrop = $(ui.draggable).attr('data-val').toString();
object.addClass('hidden');
$('#'+object.attr('data-toggle')).removeClass('hidden');
this.dragDropEvent(objectDrag + objectDrop);
}
}, this),
over: _.bind(function(event,ui){
object = $(event.target);
object.addClass('hidden');
$('#'+object.attr('data-toggle')).removeClass('hidden');
}, this),
out: _.bind(function(event,ui){
object = $(event.target);
object.removeClass('hidden');
$('#'+object.attr('data-toggle')).addClass('hidden');
}, this) // Edit mercredi soir ajouter ,this dans chaque callback
});
$('img.big-objet').draggable({
helper: "clone"
});
与在初始化对象中设置回调相比,将其与主干集成会带来什么好处?在我的主干应用程序中,我倾向于在初始化或渲染方法中设置拖放之类的内容,而不使用“事件”散列。为垃圾收集或其他目的进行集成更好吗?您使用jquery UI库实现可拖放和可拖放功能了吗?目前还没有,但我正在考虑尝试使用
over
和out
事件作为主干,但我需要的是dragenter
和dragleave
。谢谢,这是我需要的。