I've seen different examples of single object drag and drop like referenced in this question Ember.js + HTML5 drag and drop shopping cart demo
But since the drag event is on the view object, I don't se how I would achieve multiple view selection drag and drop (aka like in an email client or in evernote for instance).
Any jsbin is more than welcome.
This is an example of using drag and drop using ember along with jquery-ui . Although it is not necessary to split the draggable components into separate views, they have been split just to demonstrate the multiple view selection mentioned by the op.
So combine the following code with the example found in this thread
How do I drag multiple elements at once with JavaScript or jQuery?
(look at the comments http://jsfiddle.net/zVZFq/358/)
hbs
<script type="text/x-handlebars">
<h2> Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each post in model}}
{{#with post}}
<div class="placeholder">
{{render "post" post}}
</div>
{{/with}}
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="post">
<div class="post" {{bind-attr id="id"}}>
{{name}}
</div>
</script>
js
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return allPosts;
}
});
App.IndexView = Ember.View.extend({
classNames:["post-container"]
});
App.PostController = Ember.ObjectController.extend({
});
App.PostView = Ember.View.extend({
templateName:"post",
classNameBindings: ['selected'],
selected:Ember.computed.alias("context.selected"),
didInsertElement:function(){
this.$(".post").draggable({ revert: "invalid", snap: ".post-container",snapMode:"inner" });
var self = this;
/*jquery ui create the draggable component*/
this.$(".post").draggable({ revert: "invalid", snap: ".post-container",snapMode:"inner" });
/*create the droppable component*/
this.$().droppable({
drop:function(event,ui){
var draggedPostId = parseInt(ui.draggable.attr("id"),10);
var draggedPost = self.get("parentView").get("controller").findBy("id",draggedPostId);
var draggedOrder = draggedPost.get("order");
var droppedPost = self.get("controller").get("model");
var droppedOrder = droppedPost.get("order");
draggedPost.set("order",droppedOrder);
droppedPost.set("order",draggedOrder);
allPosts = allPosts.sortBy("order");
self.get("parentView").get("controller").set("model",allPosts);
}
});
},
click:function(){
this.toggleProperty("controller.selected");
}
});
App.Post = Ember.Object.extend({
id:null,
name:null,
order:null
});
/*this would come from a server or web storage*/
var allPosts = [];
allPosts.pushObject(App.Post.create({id:1,name:"post1",order:1}));
allPosts.pushObject(App.Post.create({id:2,name:"post2",order:2}));
allPosts.pushObject(App.Post.create({id:3,name:"post3",order:3}));
allPosts.pushObject(App.Post.create({id:4,name:"post4",order:4}));
allPosts.pushObject(App.Post.create({id:5,name:"post5",order:5}));
I'm using jqueryUI for this. Add the file below into your app and then you can extend the custom jquery views!
