Skip to content

feat(trash): add possibility to remove items via dragon #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
robinboehm wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(trash): add possibility to remove items via dragon #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 16 additions & 8 deletions dragon-drop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ angular.module('btford.dragon-drop', []).
var dropArea = getElementBehindPoint(floaty, ev.clientX, ev.clientY);

var accepts = function () {
return dropArea.attr('btf-dragon') &&
return (dropArea.attr('btf-dragon') || angular.isDefined(dropArea.attr('btf-dragon-trash')) ) &&
( !dropArea.attr('btf-dragon-accepts') ||
dropArea.scope().$eval(dropArea.attr('btf-dragon-accepts'))(dragValue) );
};
Expand All @@ -144,14 +144,22 @@ angular.module('btford.dragon-drop', []).
}

if (dropArea.length > 0) {
var expression = dropArea.attr('btf-dragon');
var targetScope = dropArea.scope();
var match = expression.match(/^\s*(.+)\s+in\s+(.*?)\s*$/);
var isList = angular.isDefined(dropArea.attr('btf-dragon')),
isTrash = angular.isDefined(dropArea.attr('btf-dragon-trash'));
if(isList){
var expression = dropArea.attr('btf-dragon');
var targetScope = dropArea.scope();
var match = expression.match(/^\s*(.+)\s+in\s+(.*?)\s*$/);

var targetList = targetScope.$eval(match[2]);
targetScope.$apply(function () {
add(targetList, dragValue, dragKey);
});
}
else if(isTrash){
// noop
}

var targetList = targetScope.$eval(match[2]);
targetScope.$apply(function () {
add(targetList, dragValue, dragKey);
});
} else if (!dragDuplicate) {
// no dropArea here
// put item back to origin
Expand Down
94 changes: 86 additions & 8 deletions example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,71 @@
<title>Dragon Drop for AngularJS</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
<style>
[btf-dragon] {
[btf-dragon],
[btf-dragon-trash]{
padding: 20px;
border: 1px solid red;
}
</style>
</head>
<body ng-app="ExampleApp">

<div class="container" ng-controller="MainCtrl">


<div class="container" ng-controller="MainCtrl">

<div class="row">
<h2>Dragon Drop Example</h2>
</div>

<hr>

<div class="row">
<h1>Dragon Drop Example</h1>
<div class="span6">
<h3>Things</h3>
<div btf-dragon="thing in things">{{thing}}</div>
</div>
<div class="span6">
<h3>Other Things</h3>
<div btf-dragon="thing in otherThings">{{thing}}</div>
</div>
</div>

<hr>


<div class="row">
<div class="span6">
<h3>Things</h3>
<pre>{{things | json}}</pre>
</div>
<div class="span6">
<h3>Other Things</h3>
<pre>{{otherThings | json}}</pre>
</div>
</div>

</div>


<div class="container" ng-controller="MainCtrl">

<div class="row">
<h2>Dragon Drop with Double Example</h2>
</div>


<hr>

<div class="row">
<div class="span6">
<h3>Things</h3>
<div btf-dragon="thing in things">{{thing}}</div>
<div btf-dragon="thing in things" btf-double-dragon>{{thing}}</div>
</div>
<div class="span6">
<h3>Other Things</h3>
<div btf-dragon="thing in otherThings">{{thing}}</div>
</div>
</div>

<hr>

<div class="row">
Expand All @@ -46,6 +84,46 @@ <h3>Other Things</h3>

</div>


<div class="container" ng-controller="MainCtrl">

<div class="row">
<h2>Dragon Drop with Trash Example</h2>
</div>


<hr>

<div class="row">
<div class="span4">
<h3>Things</h3>
<div btf-dragon="thing in things" btf-double-dragon>{{thing}}</div>
</div>
<div class="span4">
<h3>Other Things</h3>
<div btf-dragon="thing in otherThings">{{thing}}</div>
</div>
<div class="span4">
<h3>Trash</h3>
<div btf-dragon-trash></div>
</div>
</div>

<hr>

<div class="row">
<div class="span6">
<h3>Things</h3>
<pre>{{things | json}}</pre>
</div>
<div class="span6">
<h3>Other Things</h3>
<pre>{{otherThings | json}}</pre>
</div>
</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="dragon-drop.js"></script>
<script>
Expand Down