我看到了这种拖拽方式。使用ember.js http://jsfiddle.net/ud3323/5uX9H/删除UI / UX 这就像一个购物车。
我使用的是最新版本的ember.js＆＃34; 1.5.0＆＃34;并提供更多背景我使用Rails作为此ember应用程序的后端。
这里的问题是每当我拖动产品时，SimpbroAdmin.ProductDropTarget视图都不会更新。它似乎是绑定的控制器属性＆＃34; SimpbroAdmin.ProductsController.currentDragItem＆＃34; （计算属性）没有得到更新，导致问题。
小提琴和我的实现之间的主要区别在于我使用数据存储而不是小提琴的硬编码JSON内容数组。
这些是文件：
application.js.coffee
window.SimpbroAdmin = Ember.Application.create()
products.handlebars
<ul>
{{#each}}
<li>
{{#view SimpbroAdmin.ProductView contentBinding="this"}}
{{name}}
{{description}}
<span style="color:red">
{{isAdded}}
</span>
{{/view}}
</li>
{{/each}}
</ul>
{{#view SimpbroAdmin.ProductDropTarget dragContextBinding="SimpbroAdmin.ProductsController.currentDragItem"}}
Shopping Cart
<div style="height: 20px">{{view.helpText}}</div>
{{/view}}
{{#each SimpbroAdmin.CartController.cartItems}}
{{#view SimpbroAdmin.ProductView contentBinding="this"}}
{{view.name}}
{{/view}}<br />
{{/each}}
products_controller.js.coffee
SimpbroAdmin.ProductsController = Ember.ArrayController.extend(
actions:
addProduct: (name, description) ->
store = @store
product = store.createRecord "product",
name: name
description: description
product.save()
currentDragItem: Ember.computed((key, value) ->
@findProperty "isDragging", true
).property("@each.isDragging").cacheable()
productsInCart: Ember.computed((key, value) ->
@filterProperty "isAdded", true
).property("@each.isAdded").cacheable()
)
product_view.js.coffee
SimpbroAdmin.DragNDrop = Ember.Namespace.create()
SimpbroAdmin.DragNDrop.cancel = (event) ->
event.preventDefault()
false
SimpbroAdmin.DragNDrop.Draggable = Ember.Mixin.create(
attributeBindings: "draggable"
draggable: "true"
dragStart: (event) ->
dataTransfer = event.originalEvent.dataTransfer
dataTransfer.setData "Text", @get("elementId")
return
)
SimpbroAdmin.DragNDrop.Droppable = Ember.Mixin.create(
dragEnter: SimpbroAdmin.DragNDrop.cancel
dragOver: SimpbroAdmin.DragNDrop.cancel
drop: (event) ->
event.preventDefault()
false
)
SimpbroAdmin.ProductView = Ember.View.extend(SimpbroAdmin.DragNDrop.Draggable,
tagName: "span"
# .setDragImage (in #dragStart) requires an HTML element as the first argument
# so you must tell Ember to create the view and it's element and then get the
# HTML representation of that element.
dragIconElement: Ember.View.create(
attributeBindings: ["src"]
tagName: "img"
src: "http://twitter.com/api/users/profile_image/twitter"
).createElement().get("element")
dragStart: (event) ->
@_super event
# Let the controller know this view is dragging
@set "isDragging", true
console.log(@.content)
# Set the drag image and location relative to the mouse/touch event
dataTransfer = event.originalEvent.dataTransfer
dataTransfer.setDragImage @get("dragIconElement"), 24, 24
dragEnd: (event) ->
# Let the controller know this view is done dragging
@set "isDragging", false
)
SimpbroAdmin.ProductDropTarget = Ember.View.extend(SimpbroAdmin.DragNDrop.Droppable,
tagName: "div"
classNames: ["dropTarget"]
classNameBindings: ["cartAction"]
helpText: null
# This will determine which class (if any) you should add to
# the view when you are in the process of dragging an item.
cartAction: Ember.computed((key, value) ->
if Ember.isEmpty(@get("dragContext"))
@set "helpText", "(Drop Zone)"
console.log('empty')
return null
unless @getPath("dragContext.isAdded")
@set "helpText", "(Drop to Add)"
console.log('add')
"cart-add"
else if @getPath("dragContext.isAdded")
@set "helpText", "(Drop to Remove)"
console.log('remove')
"cart-remove"
else
@set "helpText", "(Drop Zone)"
null
).property("dragContext").cacheable()
drop: (event) ->
viewId = event.originalEvent.dataTransfer.getData("Text")
view = Ember.View.views[viewId]
# Set view properties
# Must be within `Ember.run.next` to always work
Ember.run.next this, ->
view.set "content.isAdded", not view.get("content.isAdded")
@_super event
)
cart_controller.js.coffee
SimpbroAdmin.CartController = Ember.ArrayController.extend(
# Sort desc by name
content: Ember.computed((key, value) ->
cartItems = @get("cartItems")
unless Ember.empty(cartItems)
cartItems.sort (a, b) ->
if (a.get("name").toLowerCase()) < (b.get("name").toLowerCase())
-1
else
1
).property("cartItems").cacheable()
cartItemsBinding: "SimpbroAdmin.ProductsController.productsInCart"
)
product.js
SimpbroAdmin.Product = DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
photo: DS.attr('string'),
in_sale: DS.attr('boolean'),
in_stock: DS.attr('boolean')
});
答案 0 :(得分：1)
该代码基于Ember 1.0之前的内容。
有很多事情需要工作，我建议你阅读Ember指南。
以下是一些提示：
您的计算属性不再需要 cacheable()
您应该使用get / set而不是getPath / setPath。
你应该避免使用全局变量并尝试使用ember的路由器。