drag and drop

in Ember.js

Cory Forsyth

@bantic




use jsbin.com
*not* jsfiddle

jsbin already has all the ember dependencies packaged as a library (for 1.0.0 rc 1)

jsfiddle has loading issues that conflict with ember

step 1:

Make your view draggable



HTML5 Drag-and-drop API: 'draggable' attribute
<div draggable='true'>

Ember view attribute bindings

Ember View drag events (dragStart, drag, dragEnd)

Step 2:
Make your view droppable


Ember View handles these drop events:
(dragEnter, dragLeave, dragOver, drop)

Must implement dragOver and
call e.preventDefault
to receive a drop.

Step 3:

Data Transfer



Can be used to set drag effects and drop effects
(changes user cursor and determines
whether dropping is allowed) 

We will use setData to pass information between views.

Titljavascript:nicTemp();e

Resources






Ask me: @bantic

emberjs drag and drop

By bantic

emberjs drag and drop

  • 6,725