| Current File : /home/jvzmxxx/wiki/extensions/InteractiveTimeline/chap-links-library/js/src/treegrid/dnd.html |
<html>
<head>
<style>
#drag {
border: 1px solid red;
background: pink;
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
}
#drop {
border: 1px solid orange;
background: yellow;
position: absolute;
left: 500px;
top: 100px;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript" src="dnd.js"></script>
</head>
<body>
<div id="drag">drag<div style="height: 50px; background-color: lightblue;">Element in div</div></div>
<div id="drop">drop<div style="height: 50px; background-color: lightblue;">Element in div</div></div>
<script type="text/javascript">
var drag = document.getElementById('drag');
dnd.makeDraggable(drag, {
//'effectAllowed': 'copyMove',
//'dragImage': '<b>drag</b>',
//'dragImageOffsetX': -30,
//'dragImageOffsetY': -30,
'dragStart': function (event) {
event.dataTransfer.setData('message', {
'text':'bla bla',
'value': 123
});
console.log('dragstart', event);
},
/*
'drag': function (event) {
console.log('drag', event);
},
*/
'dragEnd': function (event) {
console.log('dragend', event);
}
});
var drop = document.getElementById('drop');
dnd.makeDroppable(drop, {
'dropEffect': 'move',
'dragEnter': function (event) {
drop.style.opacity = '0.5';
drop.style.filter = 'alpha(opacity=50)';
console.log('dragenter', event);
},
'dragLeave': function (event) {
drop.style.opacity = '';
drop.style.filter = '';
console.log('dragleave', event);
},
'dragOver': function (event) {
console.log('dragOver', event);
},
'drop': function (event) {
console.log('drop', event, event.dataTransfer.getData('message'));
}
});
</script>
</body>
</html>