Skip to content

Instantly share code, notes, and snippets.

@bharathmuppa

bharathmuppa/index.html

Created March 13, 2015 03:53
Show Gist options
  • Save bharathmuppa/3a8e41e8efdb32f50a80 to your computer and use it in GitHub Desktop.
Save bharathmuppa/3a8e41e8efdb32f50a80 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kulatu
Raw
index.html
<!DOCTYPE html >
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="js/bgAccordian.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#container{
width:100px;
height:100px;
background:lightblue;
}
</style>
</head>
<body ng-controller="myController" bin1>
<div id="container" bin></div>
<ul>
<li id="item1" item>1</li>
<li id="item2" item>2</li>
<li id="item3" item>3</li>
</ul>
<script id="jsbin-javascript">
var app=angular.module("myApp", []);
app.controller("myController", function($scope){
$scope.allowDrop=function(e){
e.preventDefault();
};
});
app.directive("bin", function(){
return {
restrict:"A",
link:function(scope,ele, attr){
console.log(ele);
$(ele).on("drop", function(e){
e.preventDefault();
$(document.getElementById(e.originalEvent.dataTransfer.getData("bharath"))).remove();
});
$(ele).on("dragover", function(e){
e.preventDefault();
});
}
};
});
app.directive("bin1", function(){
return {
restrict:"A",
link:function(scope,ele, attr){
console.log(ele);
$(ele).on("drop", function(e){
e.preventDefault();
e.target.appendChild(document.getElementById(e.originalEvent.dataTransfer.getData("bharath")));
// document.getElementById(e.originalEvent.dataTransfer.getData("bharath")).style.left=500px;
// document.getElementById(e.originalEvent.dataTransfer.getData("bharath")).style.top=500px;
});
$(ele).on("dragover", function(e){
e.preventDefault();
});
}
};
});
app.directive("item", function(){
return{
restrict:"A",
link:function(scope,ele,attr){
console.log(ele);
$(ele).attr("draggable", true);
$(ele).on("dragstart", function(e){
e.originalEvent.dataTransfer.setData("bharath",e.originalEvent.target.id);
});
}
};
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html >
<html ng-app="myApp">
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"><\/script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"><\/script>
<script src="js/bgAccordian.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#container{
width:100px;
height:100px;
background:lightblue;
}
</style>
</head>
<body ng-controller="myController" bin1>
<div id="container" bin></div>
<ul>
<li id="item1" item>1</li>
<li id="item2" item>2</li>
<li id="item3" item>3</li>
</ul>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var app=angular.module("myApp", []);
app.controller("myController", function($scope){
$scope.allowDrop=function(e){
e.preventDefault();
};
});
app.directive("bin", function(){
return {
restrict:"A",
link:function(scope,ele, attr){
console.log(ele);
$(ele).on("drop", function(e){
e.preventDefault();
$(document.getElementById(e.originalEvent.dataTransfer.getData("bharath"))).remove();
});
$(ele).on("dragover", function(e){
e.preventDefault();
});
}
};
});
app.directive("bin1", function(){
return {
restrict:"A",
link:function(scope,ele, attr){
console.log(ele);
$(ele).on("drop", function(e){
e.preventDefault();
e.target.appendChild(document.getElementById(e.originalEvent.dataTransfer.getData("bharath")));
// document.getElementById(e.originalEvent.dataTransfer.getData("bharath")).style.left=500px;
// document.getElementById(e.originalEvent.dataTransfer.getData("bharath")).style.top=500px;
});
$(ele).on("dragover", function(e){
e.preventDefault();
});
}
};
});
app.directive("item", function(){
return{
restrict:"A",
link:function(scope,ele,attr){
console.log(ele);
$(ele).attr("draggable", true);
$(ele).on("dragstart", function(e){
e.originalEvent.dataTransfer.setData("bharath",e.originalEvent.target.id);
});
}
};
});</script></body>
</html>
Raw
jsbin.kulatu.js
var app=angular.module("myApp", []);
app.controller("myController", function($scope){
$scope.allowDrop=function(e){
e.preventDefault();
};
});
app.directive("bin", function(){
return {
restrict:"A",
link:function(scope,ele, attr){
console.log(ele);
$(ele).on("drop", function(e){
e.preventDefault();
$(document.getElementById(e.originalEvent.dataTransfer.getData("bharath"))).remove();
});
$(ele).on("dragover", function(e){
e.preventDefault();
});
}
};
});
app.directive("bin1", function(){
return {
restrict:"A",
link:function(scope,ele, attr){
console.log(ele);
$(ele).on("drop", function(e){
e.preventDefault();
e.target.appendChild(document.getElementById(e.originalEvent.dataTransfer.getData("bharath")));
// document.getElementById(e.originalEvent.dataTransfer.getData("bharath")).style.left=500px;
// document.getElementById(e.originalEvent.dataTransfer.getData("bharath")).style.top=500px;
});
$(ele).on("dragover", function(e){
e.preventDefault();
});
}
};
});
app.directive("item", function(){
return{
restrict:"A",
link:function(scope,ele,attr){
console.log(ele);
$(ele).attr("draggable", true);
$(ele).on("dragstart", function(e){
e.originalEvent.dataTransfer.setData("bharath",e.originalEvent.target.id);
});
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment