2012-05-24 31 views
10

Sürükle ve Bırak uygulamasının Ember.js ile nasıl uygulanacağına dair bir örnek var mı? JQuery UI kullanmayı denedim, ancak entegrasyon biraz karmaşık görünüyor.Sürükle ve Bırak ile Ember.js

Bu jsFiddle: http://jsfiddle.net/oskbor/Wu2cu/1/'u gördüm ancak bunu kendi uygulamanızda başarıyla uygulayamadım.

Ember.js kullanarak basit bir sürükle & bırakma uygulaması için seçenekler nelerdir?

cevap

17

Remy Sharp tarafından post'a bir göz attım ve Ember.js'de temel bir örnek uyguladı, bkz. http://jsfiddle.net/pangratz666/DYnNH/. Gidon

:

<script type="text/x-handlebars" > 
    Drag and drop the green and red box onto the blue one ... 

    {{view App.Box class="box green"}} 
    {{view App.Box class="box red"}} 

    {{view App.DropTarget class="box blue"}} 
</script>​ 

JavaScript:

DragNDrop = Ember.Namespace.create(); 

DragNDrop.cancel = function(event) { 
    event.preventDefault(); 
    return false; 
}; 

DragNDrop.Dragable = Ember.Mixin.create({ 
    attributeBindings: 'draggable', 
    draggable: 'true', 
    dragStart: function(event) { 
     var dataTransfer = event.originalEvent.dataTransfer; 
     dataTransfer.setData('Text', this.get('elementId')); 
    } 
}); 

DragNDrop.Droppable = Ember.Mixin.create({ 
    dragEnter: DragNDrop.cancel, 
    dragOver: DragNDrop.cancel, 
    drop: function(event) { 
     var viewId = event.originalEvent.dataTransfer.getData('Text'); 
     Ember.View.views[viewId].destroy();   
     event.preventDefault(); 
     return false; 
    } 
}); 

App.Box = Ember.View.extend(DragNDrop.Dragable); 
App.DropTarget = Ember.View.extend(DragNDrop.Droppable);​ 
Bu umut verici görünüyor
+0

ve ben kendi app var ne benzer. Ancak, HTML5'i sürüklenebilen ve atlanabilir özellikleri desteklemeyen tarayıcıları gerçekten desteklemiyor, işte burada olduğum şey bu. Açıkçası en çok IE desteği ile ilgileniyorum :) –

+0

Hmm, IE'de destekleniyormuş gibi görünüyor, http://caniuse.com/#feat=dragndrop bakın ... – pangratz

+1

jquery 1.7 ile kemanınızı güncelleyebilir misiniz? JQuery kenarı kullanılarak kırılmış gibi görünüyor. –