Skip to content

Instantly share code, notes, and snippets.

/index.html

Created February 15, 2017 13:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/d66662bc0f25731bfee2503724e8d2b9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/d66662bc0f25731bfee2503724e8d2b9 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/vofowip
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
#app [draggable=true] {
outline: 1px solid #eee;
}
</style>
</head>
<body>
<button onclick="initDnD();">&gt;&gt;</button>
<div id="app">
<ul>
<li>item01</li>
<li>item02</li>
<li>item03</li>
<li><span>groupA</span>
<ul>
<li>itemA1</li>
<li>itemA2</li>
<li>itemA3</li>
</ul>
</li>
<li>item04</li>
<li>item05</li>
<li><span>groupB</span>
<ul>
<li>itemB1</li>
<li>itemB2</li>
<li>itemB3</li>
</ul>
</li>
</ul>
</div>
<script id="jsbin-javascript">
function byId (id) { return document.getElementById(id); }
function byQS (qs) { return document.querySelectorAll(qs); }
function listFn (nodeList, fn, callback) {
return Array.prototype[fn].call(nodeList, callback)
}
var dragged = null,
counter = 0;
function initDnD() {
dragged = null;
console.log('===================================================');
var v = listFn(byQS('#app li'), 'forEach', function(li){
li.draggable = true;
li.dataset.value = ''+(counter++)+'@'+li.innerText;
//return li.tagName.toUpperCase()+li.innerText;
});
var rootEl = document.querySelector('#app > ul');
rootEl.addEventListener('dragstart', onDragStart, false)
rootEl.addEventListener('dragover', onDragOver, false);
rootEl.addEventListener('dragenter', onDragEnter, false);
rootEl.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
dragged = e.target;
console.log('dragstart', e.target.innerText);
}
function onDragOver(e) {
e.preventDefault();
}
function onDragEnter(e) {
// console.log('dragenter', e.target.dataset.value);
}
function onDrop(e) {
console.log('drop. dragged:', dragged,
'value:', e.target.dataset.value, 'inner:', e.target);
)
if (!e.target.dataset.value) {
var parentLi = e.target.closest('li'),
ul = parentLi && parentLi.querySelector('ul');
console.log('ul', ul);
if (ul) {
dragged.parentNode.removeChild( dragged );
ul.appendChild( dragged );
}
}
}
function calcPos(ctxEl) {
var ctxBox = ctxEl.getBoundingClientRect(),
draggedBox = dragged.getBoundingClientRect();
}
</script>
<script id="jsbin-source-css" type="text/css">#app [draggable=true] {
outline: 1px solid #eee;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
function byId (id) { return document.getElementById(id); }
function byQS (qs) { return document.querySelectorAll(qs); }
function listFn (nodeList, fn, callback) {
return Array.prototype[fn].call(nodeList, callback)
}
var dragged = null,
counter = 0;
function initDnD() {
dragged = null;
console.log('===================================================');
var v = listFn(byQS('#app li'), 'forEach', function(li){
li.draggable = true;
li.dataset.value = ''+(counter++)+'@'+li.innerText;
//return li.tagName.toUpperCase()+li.innerText;
});
var rootEl = document.querySelector('#app > ul');
rootEl.addEventListener('dragstart', onDragStart, false)
rootEl.addEventListener('dragover', onDragOver, false);
rootEl.addEventListener('dragenter', onDragEnter, false);
rootEl.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
dragged = e.target;
console.log('dragstart', e.target.innerText);
}
function onDragOver(e) {
e.preventDefault();
}
function onDragEnter(e) {
// console.log('dragenter', e.target.dataset.value);
}
function onDrop(e) {
console.log('drop. dragged:', dragged,
'value:', e.target.dataset.value, 'inner:', e.target);
)
if (!e.target.dataset.value) {
var parentLi = e.target.closest('li'),
ul = parentLi && parentLi.querySelector('ul');
console.log('ul', ul);
if (ul) {
dragged.parentNode.removeChild( dragged );
ul.appendChild( dragged );
}
}
}
function calcPos(ctxEl) {
var ctxBox = ctxEl.getBoundingClientRect(),
draggedBox = dragged.getBoundingClientRect();
}
</script></body>
</html>
Raw
jsbin.vofowip.css
#app [draggable=true] {
outline: 1px solid #eee;
}
Raw
jsbin.vofowip.js
function byId (id) { return document.getElementById(id); }
function byQS (qs) { return document.querySelectorAll(qs); }
function listFn (nodeList, fn, callback) {
return Array.prototype[fn].call(nodeList, callback)
}
var dragged = null,
counter = 0;
function initDnD() {
dragged = null;
console.log('===================================================');
var v = listFn(byQS('#app li'), 'forEach', function(li){
li.draggable = true;
li.dataset.value = ''+(counter++)+'@'+li.innerText;
//return li.tagName.toUpperCase()+li.innerText;
});
var rootEl = document.querySelector('#app > ul');
rootEl.addEventListener('dragstart', onDragStart, false)
rootEl.addEventListener('dragover', onDragOver, false);
rootEl.addEventListener('dragenter', onDragEnter, false);
rootEl.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
dragged = e.target;
console.log('dragstart', e.target.innerText);
}
function onDragOver(e) {
e.preventDefault();
}
function onDragEnter(e) {
// console.log('dragenter', e.target.dataset.value);
}
function onDrop(e) {
console.log('drop. dragged:', dragged,
'value:', e.target.dataset.value, 'inner:', e.target);
)
if (!e.target.dataset.value) {
var parentLi = e.target.closest('li'),
ul = parentLi && parentLi.querySelector('ul');
console.log('ul', ul);
if (ul) {
dragged.parentNode.removeChild( dragged );
ul.appendChild( dragged );
}
}
}
function calcPos(ctxEl) {
var ctxBox = ctxEl.getBoundingClientRect(),
draggedBox = dragged.getBoundingClientRect();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment