Skip to content

Commit 0c24f27

Browse files
mikeplatemikeplate
committed
Reordering example
1 parent 5d8e7da commit 0c24f27

File tree

6 files changed

+125
-23
lines changed

6 files changed

+125
-23
lines changed

‎README.markdown

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ elements when dragdrop() is called and to enable dropping on any element that ha
3232
what can be dragged and where it can be dropped. And you can also specify what actually happens on
3333
a drop with the function callback didDrop.
3434

35+
If you have an element containing many draggable elements, you can either attach the plugin to
36+
each individual element inside the container or attach it to the single containing element and
37+
then implement canDrag to make sure that the correct child of the container is dragged.
38+
3539
Options
3640
-------
3741

@@ -52,6 +56,8 @@ The plugin supports the following options when it is initialized for a source:
5256
* __dropClass__ can be the name of a css stylesheet. This class name is used to identify droppable
5357
area elements. The default is "drop". If a callback function is specified under "canDrop", this
5458
class name has no effect.
59+
* __container__ can be a jQuery element of a container. If specified, elements dragged will not be able
60+
to move outside of that container.
5561
* __canDrag__ can be a callback function that returns true or false. You can use this callback if you'd
5662
like to apply the plugin to a larger container, and then only make specific elements inside that
5763
container draggable by returning true from the callback if you've determined the current element

‎example/reorder.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=600,user-scalable=yes" />
5+
<title>Drag and Drop jQuery Plugin Reorder Example</title>
6+
<link rel="stylesheet" type="text/css" href="style.css" />
7+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
8+
<script src="../jquery.drag-drop.plugin.js"></script>
9+
<script>
10+
var currentOrder = ["A", "B", "C", "D", "E"];
11+
12+
$(function() {
13+
var $srcElement;
14+
var srcIndex, dstIndex;
15+
16+
$("#list>li").dragdrop({
17+
makeClone: true,
18+
sourceHide: true,
19+
dragClass: "shadow",
20+
canDrag: function($src, event) {
21+
$srcElement = $src;
22+
srcIndex = $srcElement.index();
23+
dstIndex = srcIndex;
24+
return $src;
25+
},
26+
canDrop: function($dst) {
27+
if ($dst.is("li")) {
28+
dstIndex = $dst.index();
29+
if (srcIndex<dstIndex)
30+
$srcElement.insertAfter($dst);
31+
else
32+
$srcElement.insertBefore($dst);
33+
}
34+
return true;
35+
},
36+
didDrop: function($src, $dst) {
37+
// Must have empty function in order to NOT move anything.
38+
// Everything that needs to be done has been done in canDrop.
39+
40+
if (srcIndex!=dstIndex) {
41+
var value = currentOrder[srcIndex];
42+
currentOrder.splice(srcIndex, 1);
43+
currentOrder.splice(dstIndex, 0, value);
44+
$("#msg").text("New order of items:" + currentOrder.join(", "));
45+
}
46+
}
47+
});
48+
});
49+
</script>
50+
</head>
51+
<body>
52+
<div class="header">
53+
<h1>Reorder Example</h1>
54+
</div>
55+
<div class="content">
56+
<p>Drag the items below to change their order</p>
57+
<ul id="list">
58+
<li>Item A</li>
59+
<li>Item B</li>
60+
<li>Item C</li>
61+
<li>Item D</li>
62+
<li>Item E</li>
63+
</ul>
64+
<p id="msg"></p>
65+
</div>
66+
<a href="https://github.com/mikeplate/jquery-drag-drop-plugin/blob/master/example/simple.html"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
67+
</body>
68+
</html>
69+

‎example/simple.html

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,21 @@
1616
makeClone: true,
1717
sourceHide: true,
1818
dragClass: "whileDragging",
19-
canDrag: function($src) {
20-
return !$src.hasClass("not");
19+
canDrag: function($src, event) {
20+
$src = $(event.target);
21+
return $src.hasClass("not") ? null:$src;
2122
},
2223
canDrop: function($dst) {
23-
return $dst.attr("id")=="destination" && $dst.children().size()<3;
24+
return $dst.attr("id")=="destination" && $dst.children().size()<2;
2425
},
2526
});
2627

2728
// Third example, M-R.
28-
$("#source3").dragdrop({
29+
$("#source3>div").dragdrop({
2930
makeClone: true,
3031
sourceClass: "pendingDrop",
3132
dropClass: "highlight",
3233
container: $('.content'),
33-
canDrag: function($src) {
34-
return true;
35-
},
3634
didDrop: function($src, $dst) {
3735
if ($dst.attr("id")!="destination")
3836
$dst = $dst.parents("#destination");
@@ -50,13 +48,10 @@
5048
<h1>Simple Example</h1>
5149
</div>
5250
<div class="content">
53-
<p>Drag any of letter boxes to the area below and note some different visuals and rules that can be specified as options and in stylesheets.</p>
54-
<p>A-F shows the default behavior of dragging the original element around.</p>
55-
<p>G-L shows custom behavior of dragging a clone of the element and using a different class for its appearence. Also, J is not draggable and when drop area contains 3 elements, no more dropping can occur.</p>
56-
<p>M-R shows highlighting the drop area and confines the dragging to the outer element that is centered on the page. Also, only the text contents (and not the html element) is added to the drop element.</p>
51+
<p>Drag any of letter boxes to the area below and note some different visuals and rules that can be specified as options and in stylesheets. Read more below about the different plugin customizations that is demonstrated.</p>
5752
<div id="source1" class="source boxes">
5853
<div>A</div>
59-
<div>B</div>
54+
<div><span>B</span><span>b</span></div>
6055
<div>C</div>
6156
<div>D</div>
6257
<div>E</div>
@@ -80,6 +75,22 @@ <h1>Simple Example</h1>
8075
</div>
8176
<div id="destination" class="drop boxes">
8277
</div>
78+
<p>A-F shows the default behavior of dragging the original element around.</p>
79+
<ul>
80+
<li>Works with compound elements as in the box "Bb"</li>
81+
</ul>
82+
<p>G-L shows custom behavior of dragging a clone of the element and using a different css class for its appearence.</p>
83+
<ul>
84+
<li>Plugin is attached to container element</li>
85+
<li>Source element is hidden while dragging</li>
86+
<li>Box "J" is not draggable</li>
87+
<li>When drop area has 2 elements, no more dropped elements are accepted</li>
88+
</ul>
89+
<p>M-R shows highlighting the drop area.</p>
90+
<ul>
91+
<li>Dragging is confined to the containing element centered on the page</li>
92+
<li>When dropped, text contents of drop area is concatenated with dropped letter</li>
93+
</ul>
8394
</div>
8495
<a href="https://github.com/mikeplate/jquery-drag-drop-plugin/blob/master/example/simple.html"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
8596
</body>

‎example/style.css

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ body {
44
background-color: #eee;
55
}
66
div.header {
7-
background-color: #99d;
7+
background-color: #aaf;
88
background-image: -moz-linear-gradient(top, #88d 0%, #88d 50%, #99d 50%, #99d 100%);
99
background-image: -o-linear-gradient(top, #88d 0%, #88d 50%, #99d 50%, #99d 100%);
1010
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #88d), color-stop(0.5, #88d), color-stop(0.5, #99d), color-stop(1, #99d));
@@ -30,14 +30,9 @@ h2 {
3030
margin: 0px 0px 15px 0px;
3131
font-size: 16pt;
3232
}
33-
ul {
34-
margin: 0px 0px 15px 0px;
35-
}
3633
li {
3734
font-size: 14pt;
3835
}
39-
li a {
40-
}
4136
p {
4237
margin: 0px 0px 20px 0px;
4338
font-size: 14pt;
@@ -73,6 +68,7 @@ div.whileDragging {
7368
div.not {
7469
background-image: none;
7570
background-color: #eef;
71+
cursor: inherit;
7672
}
7773
div.pendingDrop {
7874
opacity: 0.5;
@@ -83,6 +79,7 @@ div.pendingDrop {
8379
overflow: auto;
8480
margin: auto;
8581
margin-top: 25px;
82+
margin-bottom: 25px;
8683
background-color: #888;
8784
border: solid 1px #333;
8885
box-shadow: 2px 2px 2px #666;
@@ -94,4 +91,19 @@ div.pendingDrop {
9491
.highlight {
9592
background-color: #dd8;
9693
}
94+
ul#list {
95+
padding: 0px;
96+
}
97+
ul#list li {
98+
list-style-type: none;
99+
padding: 10px;
100+
background-color: #aaf;
101+
background-image: -moz-linear-gradient(-90deg, #eef, #88d);
102+
background-image: -o-linear-gradient(-90deg, #eef, #88d);
103+
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eef), color-stop(1, #88d));
104+
border-bottom: 1px solid #88d;
105+
font-weight: bold;
106+
cursor: pointer;
107+
}
108+
97109

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ <h2>About</h2>
1717
<h2>Examples</h2>
1818
<ul>
1919
<li><a href="example/simple.html">Simple example of a few configuration possibilities</a></li>
20+
<li><a href="example/reorder.html">Reorder items in a list with drag and drop</a></li>
2021
</ul>
2122
</div>
2223
<a href="https://github.com/mikeplate/jquery-drag-drop-plugin/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>

‎jquery.drag-drop.plugin.js

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
container: null, // if set, dragging is limited to this container
1111

1212
// Default is to allow all elements to be dragged
13-
canDrag: function($src) {
14-
return true;
13+
canDrag: function($src, event) {
14+
return $src;
1515
},
1616

1717
// Default is to allow dropping inside elements with css stylesheet "drop"
@@ -75,8 +75,8 @@
7575
if (!options.isActive)
7676
return;
7777

78-
var $element = $(event.target);
79-
if (options.canDrag($element)) {
78+
var $element = options.canDrag($me, event);
79+
if ($element) {
8080
$sourceElement = $element;
8181
var offset = $sourceElement.offset();
8282
var width = $sourceElement.width();
@@ -92,7 +92,10 @@
9292

9393
if (options.makeClone) {
9494
$activeElement = $sourceElement.clone(false);
95-
$activeElement.appendTo($me);
95+
96+
// Elements that are cloned and dragged around are added to the parent in order
97+
// to get any cascading styles applied.
98+
$activeElement.appendTo($element.parent());
9699
if (options.sourceClass)
97100
$sourceElement.addClass(options.sourceClass);
98101
else if (options.sourceHide)

0 commit comments

Comments
 (0)