114 lines
2.8 KiB
Plaintext
114 lines
2.8 KiB
Plaintext
<style>
|
|
.drag{
|
|
height: 50px;
|
|
width: 50px;
|
|
position: absolute;
|
|
text-align: center;
|
|
}
|
|
|
|
.dropzone {
|
|
background-color: #bfe4ff;
|
|
border: dashed 4px transparent;
|
|
border-radius: 4px;
|
|
height: 140px;
|
|
margin: 10px auto 30px;
|
|
padding: 10px;
|
|
width: 80%;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.trash {
|
|
background-color: #bfe4ff;
|
|
border: dashed 4px transparent;
|
|
border-radius: 4px;
|
|
margin: 10px auto 30px;
|
|
padding: 10px;
|
|
height: 50px;
|
|
width: 50px;
|
|
transition: background-color 0.3s;
|
|
z-index: -1;
|
|
}
|
|
|
|
.drop-active {
|
|
border-color: #aaa;
|
|
}
|
|
|
|
.drop-target {
|
|
background-color: #29e;
|
|
border-color: #fff;
|
|
border-style: solid;
|
|
}
|
|
</style>
|
|
|
|
<%- include('./static/start.ejs',{name:'main',async: true}) %>
|
|
<%- include('./header.ejs') %>
|
|
<script src="/lib/interact.min.js"></script>
|
|
|
|
|
|
<h1>none</h1>
|
|
<h1>hello</h1>
|
|
|
|
|
|
|
|
<div id="drags"></div>
|
|
|
|
<div class="dropzone"></div>
|
|
<div class="trash"></div>
|
|
|
|
<button onclick="add('cube')">add</button>
|
|
<button onclick="save()">save</button>
|
|
|
|
|
|
<script src="/lib/inter.js"></script>
|
|
<%- include('./static/end.ejs') %>
|
|
|
|
|
|
<!-- template -->
|
|
|
|
<!-- ondropactivate: function (event) {
|
|
var drag = event.relatedTarget
|
|
var zone = event.target
|
|
// add active dropzone feedback
|
|
// console.log(drag.getAttribute('data-x'));
|
|
zone.classList.add('drop-active')
|
|
},
|
|
ondragenter: function (event) {
|
|
var drag = event.relatedTarget
|
|
var zone = event.target
|
|
|
|
// feedback the possibility of a drop
|
|
// console.log(drag.getAttribute('data-x'));
|
|
drag.classList.add('can-drop')
|
|
// draggableElement.textContent = 'Dragged in'
|
|
},
|
|
ondragleave: function (event) {
|
|
var drag = event.relatedTarget
|
|
var zone = event.target
|
|
// remove the drop feedback style
|
|
// console.log(drag.getAttribute('data-x'));
|
|
zone.classList.remove('drop-target')
|
|
drag.classList.remove('in_zone')
|
|
drag.classList.remove('can-drop')
|
|
// event.relatedTarget.textContent = 'Dragged out'
|
|
},
|
|
ondrop: function (event) {
|
|
var drag = event.relatedTarget
|
|
var zone = event.target
|
|
|
|
// console.log(drag.getAttribute('data-x'));
|
|
// console.log();
|
|
objs[drag.classList[0]][drag.id] = {y:drag.getAttribute('data-y'),x:drag.getAttribute('data-x'),body:drag.innerHTML};
|
|
$.cookie("objs",JSON.stringify(objs));
|
|
drag.classList.add('in_zone')
|
|
drag.classList.remove('can-drop')
|
|
// draggableElement.textContent = 'Dropped'
|
|
},
|
|
ondropdeactivate: function (event) {
|
|
var drag = event.relatedTarget
|
|
var zone = event.target
|
|
// remove active dropzone feedback
|
|
// console.log(drag.getAttribute('data-x'));
|
|
zone.classList.remove('drop-active')
|
|
zone.classList.remove('drop-target')
|
|
}
|
|
}) --> |