Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="dragApp">
  <div ng-controller="DragCtrl">
    <!--<div ng-repeat="member in teamMembers">
      <drag-object member="member" >
      {{member.name}}
      <img ng-src="{{member.pic}}" alt="" width="50px">
      </drag-object>
    </div>-->
    
    
       <button draggable="true">Drag me</button>
    <drag-object ng-repeat="member in teamMembers" member="member" >
      {{member.name}}
      <img ng-src="{{member.pic}}" alt="" width="50px" draggable="true">
      </drag-object>    
    <div drag-target class="big-box"></div>
  </div>
​
</body>
</html>
 
.big-box{
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: right;
}
drag-object{
  display: block;
}
 
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.bind "dragstart", (event)->
        event.dataTransfer.setData("teamMember", scope.member().name)
            
          
      
    
    
  }
  
.directive "dragTarget", ()->
  return {
    restrict: "EA",
    link: (scope, element, attrs) ->
      
      element.bind "dragover", (event)->
        console.log event
        if event.preventDefault() then event.preventDefault()
        
        event.dataTransfer.dropEffect = 'move';  
        
        
      
      element.bind "drop", (event)->
        console.log event
        teamMember = event.dataTransfer.getData("teamMember")
        console.log teamMember
  }
​
# .directive "draggable", ()->
#   return{
#     restrict: "A",
#     link: (scope, element, attrs)->
#       console.log attrs
#       attrs.$observe "draggable", (event)->
#         console.log event
#       element.attr("draggable", "true")
#       scope.$apply()
    
#   }
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers