Skip to content

Instantly share code, notes, and snippets.

@pofigizm

pofigizm/index.html

Created January 18, 2015 19:02
Show Gist options
  • Save pofigizm/ea0c0ab969bf367891ff to your computer and use it in GitHub Desktop.
Save pofigizm/ea0c0ab969bf367891ff to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<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>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.itemslist {
display:inline-block;
background: white;
border: 1px solid #ccc;
}
.itemslist table{
display: inline-block;
margin: 20px 0px 20px 20px;
vertical-align: top;
}
.itemslist table:last-of-type{
margin-right: 30px;
}
.itemslist table td {
padding: 0 3px;
}
.itemslist table input {
width: 40px;
}
.itemslist table a {
display: block;
width: 20px;
height: 20px;
background-image: url("https://cdn.tutsplus.com/net/uploads/2013/08/twittericons.jpg");
background-position: -470px -40px;
}
.itemslist .answers{
background-color: #efefef;
padding: 10px;
}
.itemslist .answers div{
display: inline-block;
}
.itemslist .answers span{
background-color: #fff;
padding: 2px 10px;
margin-right: 10px;
}
.itemslist .answers span:before {
content: '[ ';
}
.itemslist .answers span:after {
content: ' ]';
}
.itemslist .answers span:hover{
cursor: pointer;
}
</style>
</head>
<body>
<body ng-app="app">
<div items-drct="items" ng-controller="itemCtrl"></div>
</body>
<script id="jsbin-javascript">
var Draggable = function () {
return {
restrict: "A",
link: function($scope, element, attributes, ctlr) {
element.attr("draggable", true);
element.bind("dragstart", function(eventObject) {
eventObject.originalEvent.dataTransfer.setData("text", attributes.itemid);
});
}
};
};
var DropTarget= function () {
return {
restrict: "A",
link: function ($scope, element, attributes, ctlr) {
element.bind("dragover", function(eventObject){
eventObject.preventDefault();
});
element.bind("drop", function(eventObject) {
console.log();
$scope.moveToBox( parseInt( eventObject.originalEvent.dataTransfer.getData("text") ), parseInt( eventObject.originalEvent.currentTarget.attributes[2].nodeValue ) );
eventObject.preventDefault();
});
}
};
};
angular.module('app', [])
.controller('itemCtrl', function ($scope) {
$scope.items = [
{id: 1, audio: '', text: 'дорога', value: '' },
{id: 2, audio: '', text: 'работа', value: '' },
{id: 3, audio: '', text: 'сентябрь', value: '' },
{id: 4, audio: '', text: 'трудно', value: '' },
{id: 5, audio: '', text: 'подруга', value: '' },
{id: 6, audio: '', text: 'комната', value: '' },
{id: 7, audio: '', text: 'папа', value: '' },
{id: 8, audio: '', text: 'банан', value: '' },
{id: 9, audio: '', text: 'инна', value: '' },
];
$scope.answers = [
{id: 1, value:'а'},
{id: 2, value:'о'},
{id: 3, value:'у'},
{id: 4, value:'и'},
{id: 5, value:'а'}
];
$scope.show = {
audio: true,
text: true,
input: true,
column: 2
};
})
.directive('itemsDrct', function () {
return {
restrict: 'A',
template: '<div class="itemslist">' +
'<table ng-repeat="col in cols">' +
'<tr ng-repeat="item in items | filter:{col:col}">' +
'<td ng-show="show.audio"><a href="{{item.audio}}"></a></td>' +
'<td ng-show="show.text">{{item.text}}</td>' +
'<td ng-show="show.input" dd-drop-target="true" targetid="{{item.id}}">' +
'<input value="{{item.value}}"></td>' +
'</tr></table>' +
'<div class="answers">' +
'<div ng-repeat="answer in answers">' +
'<span dd-draggable="true" itemid="{{answer.id}}">' +
'{{answer.value}}</span>' +
'</div></div></div>',
link:function($scope, element, attrs){
$scope.cols = '12345'.slice(0, $scope.show.column)
.split('').map(Number);
$scope.items.forEach ( function(e, i) {
e.col = Math.ceil(i / $scope.items.length * $scope.show.column + 0.01);
});
$scope.moveToBox = function(fid, tid) {
$scope.answers.forEach( function(e, i) {
if (e.id == fid) {
$scope.items.forEach( function(el, ix) {
if (el.id == tid) {
el.value = e.value;
}
});
$scope.answers.splice(i, 1);
}
});
$scope.$apply();
};
}
};
})
.directive('ddDraggable', Draggable)
.directive('ddDropTarget', DropTarget);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<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>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<body ng-app="app">
<div items-drct="items" ng-controller="itemCtrl"></div>
</body>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.itemslist {
display:inline-block;
background: white;
border: 1px solid #ccc;
}
.itemslist table{
display: inline-block;
margin: 20px 0px 20px 20px;
vertical-align: top;
}
.itemslist table:last-of-type{
margin-right: 30px;
}
.itemslist table td {
padding: 0 3px;
}
.itemslist table input {
width: 40px;
}
.itemslist table a {
display: block;
width: 20px;
height: 20px;
background-image: url("https://cdn.tutsplus.com/net/uploads/2013/08/twittericons.jpg");
background-position: -470px -40px;
}
.itemslist .answers{
background-color: #efefef;
padding: 10px;
}
.itemslist .answers div{
display: inline-block;
}
.itemslist .answers span{
background-color: #fff;
padding: 2px 10px;
margin-right: 10px;
}
.itemslist .answers span:before {
content: '[ ';
}
.itemslist .answers span:after {
content: ' ]';
}
.itemslist .answers span:hover{
cursor: pointer;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var Draggable = function () {
return {
restrict: "A",
link: function($scope, element, attributes, ctlr) {
element.attr("draggable", true);
element.bind("dragstart", function(eventObject) {
eventObject.originalEvent.dataTransfer.setData("text", attributes.itemid);
});
}
};
};
var DropTarget= function () {
return {
restrict: "A",
link: function ($scope, element, attributes, ctlr) {
element.bind("dragover", function(eventObject){
eventObject.preventDefault();
});
element.bind("drop", function(eventObject) {
console.log();
$scope.moveToBox( parseInt( eventObject.originalEvent.dataTransfer.getData("text") ), parseInt( eventObject.originalEvent.currentTarget.attributes[2].nodeValue ) );
eventObject.preventDefault();
});
}
};
};
angular.module('app', [])
.controller('itemCtrl', function ($scope) {
$scope.items = [
{id: 1, audio: '', text: 'дорога', value: '' },
{id: 2, audio: '', text: 'работа', value: '' },
{id: 3, audio: '', text: 'сентябрь', value: '' },
{id: 4, audio: '', text: 'трудно', value: '' },
{id: 5, audio: '', text: 'подруга', value: '' },
{id: 6, audio: '', text: 'комната', value: '' },
{id: 7, audio: '', text: 'папа', value: '' },
{id: 8, audio: '', text: 'банан', value: '' },
{id: 9, audio: '', text: 'инна', value: '' },
];
$scope.answers = [
{id: 1, value:'а'},
{id: 2, value:'о'},
{id: 3, value:'у'},
{id: 4, value:'и'},
{id: 5, value:'а'}
];
$scope.show = {
audio: true,
text: true,
input: true,
column: 2
};
})
.directive('itemsDrct', function () {
return {
restrict: 'A',
template: '<div class="itemslist">' +
'<table ng-repeat="col in cols">' +
'<tr ng-repeat="item in items | filter:{col:col}">' +
'<td ng-show="show.audio"><a href="{{item.audio}}"></a></td>' +
'<td ng-show="show.text">{{item.text}}</td>' +
'<td ng-show="show.input" dd-drop-target="true" targetid="{{item.id}}">' +
'<input value="{{item.value}}"></td>' +
'</tr></table>' +
'<div class="answers">' +
'<div ng-repeat="answer in answers">' +
'<span dd-draggable="true" itemid="{{answer.id}}">' +
'{{answer.value}}</span>' +
'</div></div></div>',
link:function($scope, element, attrs){
$scope.cols = '12345'.slice(0, $scope.show.column)
.split('').map(Number);
$scope.items.forEach ( function(e, i) {
e.col = Math.ceil(i / $scope.items.length * $scope.show.column + 0.01);
});
$scope.moveToBox = function(fid, tid) {
$scope.answers.forEach( function(e, i) {
if (e.id == fid) {
$scope.items.forEach( function(el, ix) {
if (el.id == tid) {
el.value = e.value;
}
});
$scope.answers.splice(i, 1);
}
});
$scope.$apply();
};
}
};
})
.directive('ddDraggable', Draggable)
.directive('ddDropTarget', DropTarget);</script></body>
</html>
Raw
jsbin.cocate.css
.itemslist {
display:inline-block;
background: white;
border: 1px solid #ccc;
}
.itemslist table{
display: inline-block;
margin: 20px 0px 20px 20px;
vertical-align: top;
}
.itemslist table:last-of-type{
margin-right: 30px;
}
.itemslist table td {
padding: 0 3px;
}
.itemslist table input {
width: 40px;
}
.itemslist table a {
display: block;
width: 20px;
height: 20px;
background-image: url("https://cdn.tutsplus.com/net/uploads/2013/08/twittericons.jpg");
background-position: -470px -40px;
}
.itemslist .answers{
background-color: #efefef;
padding: 10px;
}
.itemslist .answers div{
display: inline-block;
}
.itemslist .answers span{
background-color: #fff;
padding: 2px 10px;
margin-right: 10px;
}
.itemslist .answers span:before {
content: '[ ';
}
.itemslist .answers span:after {
content: ' ]';
}
.itemslist .answers span:hover{
cursor: pointer;
}
Raw
jsbin.cocate.js
var Draggable = function () {
return {
restrict: "A",
link: function($scope, element, attributes, ctlr) {
element.attr("draggable", true);
element.bind("dragstart", function(eventObject) {
eventObject.originalEvent.dataTransfer.setData("text", attributes.itemid);
});
}
};
};
var DropTarget= function () {
return {
restrict: "A",
link: function ($scope, element, attributes, ctlr) {
element.bind("dragover", function(eventObject){
eventObject.preventDefault();
});
element.bind("drop", function(eventObject) {
console.log();
$scope.moveToBox( parseInt( eventObject.originalEvent.dataTransfer.getData("text") ), parseInt( eventObject.originalEvent.currentTarget.attributes[2].nodeValue ) );
eventObject.preventDefault();
});
}
};
};
angular.module('app', [])
.controller('itemCtrl', function ($scope) {
$scope.items = [
{id: 1, audio: '', text: 'дорога', value: '' },
{id: 2, audio: '', text: 'работа', value: '' },
{id: 3, audio: '', text: 'сентябрь', value: '' },
{id: 4, audio: '', text: 'трудно', value: '' },
{id: 5, audio: '', text: 'подруга', value: '' },
{id: 6, audio: '', text: 'комната', value: '' },
{id: 7, audio: '', text: 'папа', value: '' },
{id: 8, audio: '', text: 'банан', value: '' },
{id: 9, audio: '', text: 'инна', value: '' },
];
$scope.answers = [
{id: 1, value:'а'},
{id: 2, value:'о'},
{id: 3, value:'у'},
{id: 4, value:'и'},
{id: 5, value:'а'}
];
$scope.show = {
audio: true,
text: true,
input: true,
column: 2
};
})
.directive('itemsDrct', function () {
return {
restrict: 'A',
template: '<div class="itemslist">' +
'<table ng-repeat="col in cols">' +
'<tr ng-repeat="item in items | filter:{col:col}">' +
'<td ng-show="show.audio"><a href="{{item.audio}}"></a></td>' +
'<td ng-show="show.text">{{item.text}}</td>' +
'<td ng-show="show.input" dd-drop-target="true" targetid="{{item.id}}">' +
'<input value="{{item.value}}"></td>' +
'</tr></table>' +
'<div class="answers">' +
'<div ng-repeat="answer in answers">' +
'<span dd-draggable="true" itemid="{{answer.id}}">' +
'{{answer.value}}</span>' +
'</div></div></div>',
link:function($scope, element, attrs){
$scope.cols = '12345'.slice(0, $scope.show.column)
.split('').map(Number);
$scope.items.forEach ( function(e, i) {
e.col = Math.ceil(i / $scope.items.length * $scope.show.column + 0.01);
});
$scope.moveToBox = function(fid, tid) {
$scope.answers.forEach( function(e, i) {
if (e.id == fid) {
$scope.items.forEach( function(el, ix) {
if (el.id == tid) {
el.value = e.value;
}
});
$scope.answers.splice(i, 1);
}
});
$scope.$apply();
};
}
};
})
.directive('ddDraggable', Draggable)
.directive('ddDropTarget', DropTarget);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment