Assalamu'alaikum wr wb,
kali ini saya akan share bagaimana Cara buat drag and drop sortable di javascript,
berikut ini syntaxnya.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
/* Required to make elements draggable in old WebKit */
-khtml-user-drag: element;
-webkit-user-drag: element;
}
.listItem {
padding: 10px 10px 10px 10px;
margin: 3px;
background-color: red;
color: white;
width: 30px;
border-top: thick solid white;
border-top-width: 1px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.dataTransferClass {
background-color: brown;
}
.dragStartClass {
opacity: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.listItem.over {
border-top: thick solid white;
border-top-width: 50px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
</style>
</head>
<body>
<ul id="checklist">
<li class="listItem" draggable="true">1</li>
<li class="listItem" draggable="true">2</li>
<li class="listItem" draggable="true">3</li>
<li class="listItem" draggable="true">4</li>
<li class="listItem" draggable="true">5</li>
<li class="listItem" draggable="true">6</li>
</ul>
<script type="text/javascript">
// code by Friso NL - frisog at gmail .com
// events to create according ot: http://www.html5rocks.com/en/tutorials/dnd/basics/
//
// dragstart
// drag
// dragenter
// dragleave
// dragover
// drop
// dragend
var listItems = document.querySelectorAll('.listItem');
var dragSrcEl = null;
function handleDragStart(e) {
this.className += " dragStartClass";
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
e.dataTransfer.setDragClass("dataTransferClass");
}
function handleDragOver(e) {
// if (e.preventDefault) { not needed according to my question and anwers on : http://stackoverflow.com/questions/36920665/why-if-statement-with-e-preventdefault-drag-and-drop-javascript
e.preventDefault();
// }
e.dataTransfer.dropEffect = 'move'; // sets cursor
return false;
}
function handleDragEnter(e) {
// this / e.target is the current hover target.
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over'); // this / e.target is previous target element.
}
function handleDrop(e) {
var listItems = document.querySelectorAll('.listItem');
e.stopPropagation(); // stops the browser from redirecting.
dragSrcOrderId = parseInt(dragSrcEl.getAttribute("order-id"));
dragTargetOrderId = parseInt(this.getAttribute("order-id"));
var tempThis = this;
// Don't do anything if dropping the same column we're dragging.
// and
// check if only one difference and then do not execute
// && ((Math.abs(dragSrcOrderId - dragTargetOrderId)) != 1)
if (dragSrcEl != this) {
// Set the source column's HTML to the HTML of the column we dropped on.
var tempThis = this;
function makeNewOrderIds(tempThis) {
// check if up or down movement
dragSrcEl.setAttribute("order-id", dragTargetOrderId);
tempThis.setAttribute("order-id", dragTargetOrderId);
// find divs between old and new location and set new ids - different in up or down movement (if else)
if (dragSrcOrderId < dragTargetOrderId) {
for (i = dragSrcOrderId + 1; i < dragTargetOrderId; i++) {
listItems[i].setAttribute("order-id", i - 1);
// set new id src
dragSrcEl.setAttribute("order-id", dragTargetOrderId - 1);
}
} else {
for (i = dragTargetOrderId; i < dragSrcOrderId; i++) {
listItems[i].setAttribute("order-id", i + 1);
// set new id src
dragSrcEl.setAttribute("order-id", dragTargetOrderId);
}
}
};
makeNewOrderIds(tempThis);
dragSrcEl.classList.remove("dragStartClass");
reOrder(listItems);
} else {
dragSrcEl.classList.remove("dragStartClass");
return false;
}
};
function handleDragEnd(e) {
for (i = 0; i < listItems.length; i++) {
listItem = listItems[i];
listItem.classList.remove('over');
}
dragSrcEl.classList.remove("dragStartClass");
}
for (i = 0; i < listItems.length; i++) {
listItem = listItems[i];
listItem.setAttribute("order-id", i);
listItem.addEventListener('dragstart', handleDragStart, false)
listItem.addEventListener('dragenter', handleDragEnter, false)
listItem.addEventListener('dragover', handleDragOver, false)
listItem.addEventListener('dragleave', handleDragLeave, false)
listItem.addEventListener('drop', handleDrop, false)
listItem.addEventListener('dragend', handleDragEnd, false)
}
function reOrder(listItems) {
var tempListItems = listItems;
tempListItems = Array.prototype.slice.call(tempListItems, 0);
tempListItems.sort(function(a, b) {
return a.getAttribute("order-id") - b.getAttribute("order-id");
});
var parent = document.getElementById('checklist');
parent.innerHTML = "";
for (var i = 0, l = tempListItems.length; i < l; i++) {
parent.appendChild(tempListItems[i]);
}
};
</script>
</body>
</html>
Semoga bermanfaat.
https://pangeran-it.blogspot.co.id/
Cara buat drag and drop sortable di javascript
Reviewed by Syawaluddin Amin, S.Kom
on
September 30, 2017
Rating:
Reviewed by Syawaluddin Amin, S.Kom
on
September 30, 2017
Rating:
![Cara mengatasi error microsoft excel style 'comma [0]' not found](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFi0vZX0Si_GfPTRMx9sV-xbrBAfxPv3hwRBnI_wXXHpVWuLXE-OEbztMvyCJDcn1Lt9iCfluqm2_q_cviCxFKjHMj6DgyTzYgzF5pFB_McNqh-vQuKZAVenkPpYa23kOvNlivVY7LjgU/s72-w618-c-h323/Screenshot_0.png "Cara mengatasi error microsoft excel style 'comma [0]' not found")
Tidak ada komentar: