-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdrag.php
107 lines (106 loc) · 2.01 KB
/
drag.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html>
<head>
<style>
.container
{
white-space: nowrap;
min-width:100%;
width:1000%;
}
.list
{
float:left;
display: inline-block;
width:200px;
min-height:100px;
margin:5px;
background-color:yellow;
}
.card
{
background-color:red;
margin:5px;
}
</style>
<link href="jquery-ui.css" type="text/css" rel="stylesheet" media="screen,projection">
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<a href="javascript:void(0);" onclick="createButton()">Create new button</a>
<div class="container">
<div class="list" id="list1">
<div class="card">One
</div>
<div class="card">Two
</div>
</div>
<div class="list">
<div class="card">Three
</div>
<div class="card">Four
</div>
</div>
<div class="list">
<div class="card">Five
</div>
</div>
</div>
<script>
function createButton()
{
var obj = "";
obj += '<div class="card">Dynamic</div>';
$("#list1").append(obj);
$( ".card" ).draggable({
appendTo :"body",
helper:"clone",
grid: [1, 1],
revert:false,
connectToSortable:".list",
start: function(e, ui)
{
$(ui.helper).css("width","200px");
},
stop : function (e,ui)
{
}
});
}
$( ".container" ).sortable({
appendTo:"body",
dropOnEmpty:"false",
update : function(e,ui)
{
}
});
$( ".card" ).draggable({
appendTo :"body",
helper:"clone",
grid: [1, 1],
revert:false,
connectToSortable:".list",
start: function(e, ui)
{
$(ui.helper).css("width","200px");
},
stop : function (e,ui)
{
}
});
$( ".list" ).sortable({
appendTo:"body",
dropOnEmpty:"false",
start : function (e,ui)
{
ui.placeholder.css({visibility: 'visible', border : '1px solid black'});
//alert();
},
receive : function(e,ui)
{
}
});
</script>
</body>
</html>