主幹使用簡單的拖放

我使用的是默認的拖動和骨幹應用，我聽的事件在我看來，像這裏面的下降：主幹使用簡單的拖放

"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="" />

我所有的事件都能正常工作，但不是放置事件。所以我的問題是如何使它工作？

來源

2012-01-17 Awea

你是什麼意思與骨幹VS在初始化對象設置回調整合這得到什麼？在我的Backbone應用程序中，我傾向於在初始化或渲染方法中設置拖放等操作，並且不要爲它們使用「事件」散列。集成垃圾收集目的還是其他方法更好？ – 2012-01-17 23:02:27

你使用jQuery UI的可拖動和拖放的庫嗎？ – 2012-01-18 08:57:38

不是在這個時刻，但我在想 – Awea 2012-01-18 09:06:27

通過使用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" 
});

來源

2012-02-03 11:18:19 Awea

只要快速查看它，看起來像'objectHover'後面缺少逗號。

來源

2012-01-17 22:47:21 kgaddy

抱歉，錯誤的複製和粘貼 – Awea 2012-01-17 23:00:09

主幹使用簡單的拖放

回答

相關問題