Skip to content

Instantly share code, notes, and snippets.

@chrism

chrism/index.html

Created October 22, 2014 08:45
Show Gist options
  • Save chrism/9c1c0a68d517fad89869 to your computer and use it in GitHub Desktop.
Save chrism/9c1c0a68d517fad89869 to your computer and use it in GitHub Desktop.
Download ZIP
// source http://jsbin.com/asuyek/4 Drag & Drop Ember Example
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style id="jsbin-css">
.draggable {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 1em;
}
.draggable.is-dragging {
border: 1px dotted black;
background-color: lightgray;
}
.droppable {
width: 300px;
height: 300px;
background-color: lightblue;
border: 1px solid black;
margin: 1em;
}
.droppable.is-drag-over {
border: 2px dotted black;
}
</style>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<h1>Ember Drag-n-Drop Demo</h1>
<h2><a href='http://www.rvl.io/bantic/emberjs-drag-and-drop/'>Slides</a></h2>
<hr>
{{view App.DraggableView name="draggable1"}}
{{view App.DroppableView name="droppable1"}}
{{view App.DraggableView name="draggable2"}}
</script>
<script type="text/x-handlebars" data-template-name='draggable-view'>
Name: <em>{{view.name}}</em>
<br>
{{#if view.isDragging}}
What a drag
{{/if}}
<br>
I am draggable
<br>
{{#if view.wasDropped}}
I was dropped on <em>{{view.droppedViewName}}</em>!
{{/if}}
</script>
<script type="text/x-handlebars" data-template-name='droppable-view'>
Name: <em>{{view.name}}</em>
<br>
I am droppable
<br>
<br>
{{#if view.isDragOver}}
Something is hovering over me!
{{/if}}
<br>
{{#if view.didReceiveDrop}}
<em>{{view.draggedViewName}}</em> was dropped on me.
{{/if}}
</script>
<script type="text/x-handlebars" data-template-name='draggable-droppable-view'>
Name: <em>{{view.name}}</em>
<br>
{{#if view.isDragging}}
What a drag
{{/if}}
<br>
{{#if view.isDraggable}}
I am draggable
{{/if}}
<br>
{{#if view.isDroppable}}
I am droppable
{{/if}}
<br>
{{#if view.wasDropped}}
I was dropped on <em>{{view.droppedViewName}}</em>!
{{/if}}
<br>
{{#if view.isDragOver}}
Something is hovering over me!
{{/if}}
<br>
{{#if view.didReceiveDrop}}
<em>{{view.draggedViewName}}</em> was dropped on me.
{{/if}}
</script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.DraggableViewMixin = Ember.Mixin.create({
classNames: ['draggable'],
classNameBindings: ['isDragging'],
attributeBindings: ['draggable'],
draggable: 'true', // must be the string 'true'
dragStart: function(event) {
this.set('isDragging', true);
var dragData = { elementId: this.get('elementId') };
event.dataTransfer.setData(
'application/json', // first argument is data type
JSON.stringify( dragData ) // can only transfer strings
);
},
dragEnd: function() {
this.set('isDragging', false);
},
// our custom method,
// not an html5 drag-n-drop api or ember view event method
wasDroppedOn: function(droppedOnView) {
this.set('wasDropped', true);
this.set('droppedViewName', droppedOnView.get('name'));
},
isDraggable: true
});
App.DroppableViewMixin = Ember.Mixin.create({
classNames: ['droppable'],
classNameBindings: ['isDragOver'],
dragEnter: function() {
this.set('isDragOver', true);
},
dragLeave: function() {
this.set('isDragOver', false);
},
dragOver: function(event) {
event.preventDefault();
},
drop: function(event) {
var dragData = JSON.parse( event.dataTransfer.getData('application/json') );
var draggedView = Ember.View.views[ dragData.elementId ];
draggedView.wasDroppedOn(this);
this.set('isDragOver', false);
this.set('didReceiveDrop', true);
this.set('draggedViewName', draggedView.get('name'));
},
isDroppable: true
});
App.DraggableView = Ember.View.extend(App.DraggableViewMixin, {
templateName: 'draggable-view'
});
App.DroppableView = Ember.View.extend(App.DroppableViewMixin, {
templateName: 'droppable-view'
});
App.DragDroppableView = Ember.View.extend(App.DraggableViewMixin, App.DroppableViewMixin, {
templateName: 'draggable-droppable-view'
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"><\/script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<h1>Ember Drag-n-Drop Demo</h1>
<h2><a href='http://www.rvl.io/bantic/emberjs-drag-and-drop/'>Slides</a></h2>
<hr>
{{view App.DraggableView name="draggable1"}}
{{view App.DroppableView name="droppable1"}}
{{view App.DraggableView name="draggable2"}}
<\/script>
<script type="text/x-handlebars" data-template-name='draggable-view'>
Name: <em>{{view.name}}</em>
<br>
{{#if view.isDragging}}
What a drag
{{/if}}
<br>
I am draggable
<br>
{{#if view.wasDropped}}
I was dropped on <em>{{view.droppedViewName}}</em>!
{{/if}}
<\/script>
<script type="text/x-handlebars" data-template-name='droppable-view'>
Name: <em>{{view.name}}</em>
<br>
I am droppable
<br>
<br>
{{#if view.isDragOver}}
Something is hovering over me!
{{/if}}
<br>
{{#if view.didReceiveDrop}}
<em>{{view.draggedViewName}}</em> was dropped on me.
{{/if}}
<\/script>
<script type="text/x-handlebars" data-template-name='draggable-droppable-view'>
Name: <em>{{view.name}}</em>
<br>
{{#if view.isDragging}}
What a drag
{{/if}}
<br>
{{#if view.isDraggable}}
I am draggable
{{/if}}
<br>
{{#if view.isDroppable}}
I am droppable
{{/if}}
<br>
{{#if view.wasDropped}}
I was dropped on <em>{{view.droppedViewName}}</em>!
{{/if}}
<br>
{{#if view.isDragOver}}
Something is hovering over me!
{{/if}}
<br>
{{#if view.didReceiveDrop}}
<em>{{view.draggedViewName}}</em> was dropped on me.
{{/if}}
<\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">.draggable {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 1em;
}
.draggable.is-dragging {
border: 1px dotted black;
background-color: lightgray;
}
.droppable {
width: 300px;
height: 300px;
background-color: lightblue;
border: 1px solid black;
margin: 1em;
}
.droppable.is-drag-over {
border: 2px dotted black;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create();
App.DraggableViewMixin = Ember.Mixin.create({
classNames: ['draggable'],
classNameBindings: ['isDragging'],
attributeBindings: ['draggable'],
draggable: 'true', // must be the string 'true'
dragStart: function(event) {
this.set('isDragging', true);
var dragData = { elementId: this.get('elementId') };
event.dataTransfer.setData(
'application/json', // first argument is data type
JSON.stringify( dragData ) // can only transfer strings
);
},
dragEnd: function() {
this.set('isDragging', false);
},
// our custom method,
// not an html5 drag-n-drop api or ember view event method
wasDroppedOn: function(droppedOnView) {
this.set('wasDropped', true);
this.set('droppedViewName', droppedOnView.get('name'));
},
isDraggable: true
});
App.DroppableViewMixin = Ember.Mixin.create({
classNames: ['droppable'],
classNameBindings: ['isDragOver'],
dragEnter: function() {
this.set('isDragOver', true);
},
dragLeave: function() {
this.set('isDragOver', false);
},
dragOver: function(event) {
event.preventDefault();
},
drop: function(event) {
var dragData = JSON.parse( event.dataTransfer.getData('application/json') );
var draggedView = Ember.View.views[ dragData.elementId ];
draggedView.wasDroppedOn(this);
this.set('isDragOver', false);
this.set('didReceiveDrop', true);
this.set('draggedViewName', draggedView.get('name'));
},
isDroppable: true
});
App.DraggableView = Ember.View.extend(App.DraggableViewMixin, {
templateName: 'draggable-view'
});
App.DroppableView = Ember.View.extend(App.DroppableViewMixin, {
templateName: 'droppable-view'
});
App.DragDroppableView = Ember.View.extend(App.DraggableViewMixin, App.DroppableViewMixin, {
templateName: 'draggable-droppable-view'
});</script></body>
</html>
Raw
jsbin.asuyek.css
.draggable {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 1em;
}
.draggable.is-dragging {
border: 1px dotted black;
background-color: lightgray;
}
.droppable {
width: 300px;
height: 300px;
background-color: lightblue;
border: 1px solid black;
margin: 1em;
}
.droppable.is-drag-over {
border: 2px dotted black;
}
Raw
jsbin.asuyek.js
App = Ember.Application.create();
App.DraggableViewMixin = Ember.Mixin.create({
classNames: ['draggable'],
classNameBindings: ['isDragging'],
attributeBindings: ['draggable'],
draggable: 'true', // must be the string 'true'
dragStart: function(event) {
this.set('isDragging', true);
var dragData = { elementId: this.get('elementId') };
event.dataTransfer.setData(
'application/json', // first argument is data type
JSON.stringify( dragData ) // can only transfer strings
);
},
dragEnd: function() {
this.set('isDragging', false);
},
// our custom method,
// not an html5 drag-n-drop api or ember view event method
wasDroppedOn: function(droppedOnView) {
this.set('wasDropped', true);
this.set('droppedViewName', droppedOnView.get('name'));
},
isDraggable: true
});
App.DroppableViewMixin = Ember.Mixin.create({
classNames: ['droppable'],
classNameBindings: ['isDragOver'],
dragEnter: function() {
this.set('isDragOver', true);
},
dragLeave: function() {
this.set('isDragOver', false);
},
dragOver: function(event) {
event.preventDefault();
},
drop: function(event) {
var dragData = JSON.parse( event.dataTransfer.getData('application/json') );
var draggedView = Ember.View.views[ dragData.elementId ];
draggedView.wasDroppedOn(this);
this.set('isDragOver', false);
this.set('didReceiveDrop', true);
this.set('draggedViewName', draggedView.get('name'));
},
isDroppable: true
});
App.DraggableView = Ember.View.extend(App.DraggableViewMixin, {
templateName: 'draggable-view'
});
App.DroppableView = Ember.View.extend(App.DroppableViewMixin, {
templateName: 'droppable-view'
});
App.DragDroppableView = Ember.View.extend(App.DraggableViewMixin, App.DroppableViewMixin, {
templateName: 'draggable-droppable-view'
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment