In the function defined in property
onDragEnd the saveSortOrder is created such that upon each drag event, an array is created to store the current position of each div element, for example, [1, 0, 3 , 2, 4] means div of id 1, 0, 3, 2, 4 are at position 0, 1, 2, 3, 4 respectively.<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
background-color: #333;
font-family: Monospace;
color: silver;n
}
.sort {
display: inline-block;
width: 18%;
height: 20%;
font-size: 20px;
border-radius: 5px;
background-color: #7cfc00;
color: black;
position: absolute;
border: 1px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 8px;
}
.sort:active {
background-color: #008445;
color: white;
}
.gsap {
color: #7cfc00;
}
h4 {
color: gray;
}
</style>
</head>
<body>
<div id="divcont">
<div class="sort" id="0"> 0</div>
<div class="sort" id="1"> 1</div>
<div class="sort" id="2"> 2</div>
<div class="sort" id="3"> 3</div>
<div class="sort" id="4"> 4</div>
</div>
<script>
$(document).ready(function() {
let windowsize = $(window).width();
draggableScript();
$(window).resize(function() {
draggableScript();
});
});
function draggableScript() {
let windowsize = $(window).width();
createSortable("divcont");
function createSortable(selector) {
var newX,
sortable = document.getElementById(selector);
Draggable.create(sortable.children, {
type: "x",
bounds: "#divcont",
onPress: function() {
newX = this.x;
},
onDragEnd: function() {
var i = sortable.children.length,
dragIndex,
targetIndex = $.inArray(
this.target,
sortable.children
);
while (--i > -1) {
if (this.hitTest(sortable.children[i], "10%")) {
TweenLite.to(sortable.children[i], 0.2, {
x: newX
});
dropIndex = i;
}
}
if (typeof dropIndex !== "undefined") {
dragIndex =
targetIndex < dropIndex
? dropIndex + 1
: dropIndex;
sortable.insertBefore(
sortable.children[dropIndex],
sortable.children[targetIndex]
);
sortable.insertBefore(
this.target,
sortable.children[dragIndex]
);
}
let saveSortOrder = [];
for (i = 0; i < 5; i++) {
saveSortOrder.push(
document
.getElementById("divcont")
.getElementsByTagName("div")
[i].getAttribute("id")
);
}
console.log(saveSortOrder);
},
liveSnap: true,
snap: function(endValue) {
return (
Math.round(endValue / (0.2 * windowsize)) *
0.2 *
windowsize
);
}
});
TweenLite.set(sortable, {
height: 0.085 * windowsize * sortable.children.length
});
for (var i = 0; i < sortable.children.length; i++) {
TweenLite.set(sortable.children[i], {
x: 0.2 * windowsize * i
});
}
}
}
// We get id array by:
</script>
</body>
</html>
No comments:
Post a Comment