drag'n'drop

This commit is contained in:
Flummi 2018-08-14 17:17:01 +02:00
parent 501391be2e
commit 168ac39db4
4 changed files with 88 additions and 21 deletions

View File

@ -15,10 +15,10 @@
<div id="p0_discard"> <div id="p0_discard">
<div id="p0_discard_0" class="pile"></div> <div id="p0_discard_0" class="pile"></div>
<div></div> <div></div>
<div id="p0_discard_1" class="pile"></div> <div id="p0_discard_1" class="pile" dropable="true"></div>
<div id="p0_discard_2" class="pile"></div> <div id="p0_discard_2" class="pile" dropable="true"></div>
<div id="p0_discard_3" class="pile"></div> <div id="p0_discard_3" class="pile" dropable="true"></div>
<div id="p0_discard_4" class="pile"></div> <div id="p0_discard_4" class="pile" dropable="true"></div>
</div> </div>
<div id="p1" class="player"> <div id="p1" class="player">
<div id="p1_pile_card_0" class="pile"></div> <div id="p1_pile_card_0" class="pile"></div>
@ -45,12 +45,12 @@
<div id="p3_pile_card_4" class="pile"></div> <div id="p3_pile_card_4" class="pile"></div>
</div> </div>
<div id="mainstack"> <div id="mainstack">
<div id="mainstack_card_0" class="pile"></div> <div id="mainstack_card_0" class="pile" dropable="true"></div>
<div id="mainstack_card_1" class="pile"></div> <div id="mainstack_card_1" class="pile" dropable="true"></div>
<div id="mainstack_card_2" class="pile"></div> <div id="mainstack_card_2" class="pile" dropable="true"></div>
<div id="mainstack_card_3" class="pile"></div> <div id="mainstack_card_3" class="pile" dropable="true"></div>
</div> </div>
</div> </div>
<script src="./main.js" defer></script> <script src="./js/main.js" type="module" defer></script>
</body> </body>
</html> </html>

View File

@ -0,0 +1,49 @@
let dragged;
document.querySelectorAll("[dropable='true']").forEach(e => {
e.addEventListener("drag", event => {
}, false);
e.addEventListener("dragstart", event => {
dragged = event.target;
}, false);
e.addEventListener("dragend", event => {
}, false);
e.addEventListener("dragover", event => {
event.preventDefault();
}, false);
e.addEventListener("dragenter", event => {
event.target.style.opacity = "0.4";
}, false);
e.addEventListener("dragleave", event => {
event.target.style.opacity = "";
}, false);
e.addEventListener("drop", event => {
event.preventDefault();
const to = event.target.id.slice(0, 4) !== "main" ? event.target.parentNode : event.target;
const from = {
val: dragged
};
console.log("from", dragged);
console.log("to", to);
event.target.style.opacity = "";
}, false);
});
export default ({
createCardEvents: () => {
document.querySelectorAll(".card_outer[draggable='true']").forEach(card => {
card.addEventListener("dragstart", event => {
event.dataTransfer.setData("text/plain", null);
});
});
}
});

View File

@ -1,24 +1,29 @@
import events from "./events.js";
const colors = { const colors = {
1: "blue", 2: "blue", 3: "blue", 4: "blue", 1: "blue", 2: "blue", 3: "blue", 4: "blue",
5: "green", 6: "green", 7: "green", 8: "green", 5: "green", 6: "green", 7: "green", 8: "green",
9: "red", 10: "red", 11: "red", 12: "red" 9: "red", 10: "red", 11: "red", 12: "red"
}; };
const card = ({ val }) => const card = ({ val, drag }) =>
`<div class="card_outer" draggable="true"> `<div class="card_outer" data-val="${val}"${drag ? 'draggable="true"' : ''}>
<div class="card_tri card_color_${colors[val]}"></div> <div class="card_tri card_color_${colors[val]}"></div>
<div class="card_number card_number_1">${val}</div> <div class="card_number card_number_1">${val}</div>
<div class="card_number_middle ${colors[val]}">${val}</div> <div class="card_number_middle ${colors[val]}">${val}</div>
<div class="card_number card_number_2">${val}</div> <div class="card_number card_number_2">${val}</div>
</div>`; </div>`;
/*document.querySelector("#p0_pile_card_0").insertAdjacentHTML("beforeend",
[{ val: ~~(Math.random() * 12) + 1 }].map(card).join``
);*/
const fillAll = () => { const fillAll = () => {
document.querySelectorAll(".pile").forEach(slot => { document.querySelectorAll(".pile").forEach(slot => {
console.log(slot.id);
if(slot.id.slice(0, 4) === "main" && slot.id.slice(-1) === "0")
return;
slot.insertAdjacentHTML("beforeend", slot.insertAdjacentHTML("beforeend",
[{ val: ~~(Math.random() * 12) + 1 }].map(card).join`` [{ val: ~~(Math.random() * 12) + 1, drag: slot.id.slice(0, 2) === "p0" }].map(card).join``
); );
}); });
}; };
fillAll();
events.createCardEvents();

View File

@ -17,6 +17,24 @@ html, body {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
* {
user-drag: none;
user-select: none;
}
*[draggable=true] {
cursor: move;
}
div[dropable=true] > * > * {
pointer-events: none;
}
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-khtml-user-drag: element;
-webkit-user-drag: element;
}
.player { .player {
position: absolute; position: absolute;
@ -176,8 +194,3 @@ html, body {
var(--blue) 93.33% var(--blue) 93.33%
); );
} }
[draggable=true] {
cursor: move;
}