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)

Start jsbin
End jsbin

Step 2:
Make your view droppable


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

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

Start jsbin
End jsbin

Step 3:

Data Transfer


event.dataTransfer

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.

start jsbin
end jsbin 

Titljavascript:nicTemp();e

Resources


Final, cleaned-up jsbin

MDN Drag and Drop Docs

Ember View Customization Guide

Ember View API Docs

Ask me: @bantic
Made with Slides.com