在使用 angularjs 创建指令时尝试将 draggable="true" 放到标签上。 ng-repeat 似乎不允许它渲染？
angular.module("dragApp", [])
.controller "DragCtrl", ($scope)->
$scope.teamMembers =[
{
name: "Moe",
pic: "https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10325183_10152504984116189_3762377112286239452_n.jpg?oh=64e01b1da81432362dcab98cecb0c01c&oe=54C902AC&__gda__=1421608147_ded25febd4716ec3b3d9593aacb505cb"
}
{
name: "Jack",
pic: "https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/1977155_10152328488946189_414460480_n.jpg?oh=f3f5772957ec826711f5e4de544b4920&oe=5483B18B&__gda__=1421730769_cde9a341e521dae06b84ce6f65f88803"
}
{
name: "Joe",
pic: "https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash2/t31.0-8/921299_10152077464151189_214902483_o.jpg"
}
]
.directive "dragObject", ()->
return {
restrict: "E",
scope: {
member: "&"
},
link: (scope, element, attrs)->
element.attr("draggable", "true")
attrs.draggable = "true"
element.bind "dragstart", (event)->
if event.preventDefault() then event.preventDefault()
event.dataTransfer.setData("teamMember", scope.member.name)
console.log attrs
# console.log element.attr("draggable")
# attrs.$observe "draggable", (event, event2)->
# console.log event
}
.directive "dragTarget", ()->
return {
restrict: "EA",
link: (scope, element, attrs) ->
element.bind "dragenter", (event)->
console.log event
event.preventDefault()
element.bind "drop", (event)->
console.log event
teamMember = event.dataTransfer.getData("teamMember")
console.log teamMember
}
html:
<body ng-app="dragApp">
<div ng-controller="DragCtrl">
<div ng-repeat="member in teamMembers">
<drag-object member="member" >
<button draggable="true">Drag me</button>
{{member.name}}
<img ng-src="{{member.pic}}" alt="" width="50px">
</drag-object>
</div>
<button draggable="true">Drag me</button>
<!-- <drag-object member="teamMembers[0]">
{{teamMembers[0].name}}
<img ng-src="{{teamMembers[0].pic}}" alt="" width="50px">
</drag-object>
-->
<div drag-target class="big-box"></div>
</div>
</body>
最佳答案
该代码似乎可以与 ng-repeat inside 指令配合使用。请查看HERE ，这就是你需要的
<drag-object ng-repeat="member in teamMembers" member="member" >
{{member.name}}
<img ng-src="{{member.pic}}" alt="" width="50px" draggable="true">
</drag-object>
关于javascript - 带有 ng-repeat 的 html5 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26008622/