HTML and CSS Reference
In-Depth Information
#pubProduct {
position: absolute;
top: 0px;
left: 0px;
width:100px;
height:100px;
background: url(hammer.png) no-repeat;
z-index: 90;
}
</style>
<script type="text/javascript">
//fires when product is over the drop area
function allowDrop(event) {
//cancel default for drop event to fire
event.preventDefault();
console.log("YOU'RE OVER THE DROP AREA!!!")
}
function dropArea(event){
var data = event.dataTransfer.getData("Text");
var dropArea = document.getElementById('dropper');
var element = document.getElementById(data);
dropArea.appendChild(element);
console.log(element)
}
//initial drag when product is selected
function drag(event) {
var dropImg = document.createElement("img");
dropImg.src = "add.png";
dropImg.width = "48px";
dropImg.height = "48px";
dropImg.style.opacity = "0.5";
event.dataTransfer.effectAllowed='all';
event.dataTransfer.setData("Text", event.target.getAttribute('id'));
event.dataTransfer.setDragImage(dropImg, 25, 25);
}
function adInit(event) {
console.log(event.type)
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</head>
Search WWH ::




Custom Search