9 Replies - 1451 Views - Last Post: 27 December 2013 - 03:11 PM

#1 DangerousDave   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 06-May 13

using copy property with native drag and drop.

Posted 27 December 2013 - 01:47 PM

Hi, I'm kinda new to the forums so bare with me please.
First I'm working with a simplified version for this example.
I'm working on a craps game. I would like chips to be in my bank as long as I have money in it.
I would like to drag a chip from my bank on to a bet area and have it drop a copy of it to the bet area.
Next if I drop another chip on the bet area I want it to add that chip to the rest and report it on top of the chip.
for this I'm using the native HTML5 Drag and Drop function. using their key words, but I feel like they are just named variables.
Please help me get this to drop the copy of the coin.
Here is the code I have so far that lets me drag the coin to the right area but I can't get it to drop the copy.
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev) {
	
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));

}



the project example is posted here. http://dangerousdave...tagaincrap.html

Is This A Good Question/Topic? 0
  • +

Replies To: using copy property with native drag and drop.

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6833
  • View blog
  • Posts: 28,342
  • Joined: 12-December 12

Re: using copy property with native drag and drop.

Posted 27 December 2013 - 02:03 PM

This line:

var passline = betAmount;

gives an error in the console because betAmount is not defined anywhere. You need to correct this first as it prevents your script from running. Neither variable is used anywhere else so, for the moment, you could delete, or comment-out, this line.

You also have a few elements with the same id of "c5". Ids must be unique on the page.

Maybe you've already gone through a tutorial(?) but this one at html5rocks looks good.

This post has been edited by andrewsw: 27 December 2013 - 02:05 PM

Was This Post Helpful? 0
  • +
  • -

#3 DangerousDave   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 06-May 13

Re: using copy property with native drag and drop.

Posted 27 December 2013 - 02:13 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Help me Fix it</title>
<style>
#diceRoll {
height: 150px;
width: 300px;
border: 2px dashed black;
background-color: green;	
position: absolute;
top: 300px;
left: 650px;
}

#die1 {
	height: 100px; 
	width: 100px;
	border: 2px solid black; 
	background-color: red; 
	box-shadow: 10px 10px 5px #888888;
	text-align: center; 
	border-radius: 20px; 
	font-size: 60px; 
	font-family: cursive;
	float: left;
}
#die2 {
	height: 100px; 
	width: 100px;
	border: 2px solid black; 
	background-color: red; 
	box-shadow: 10px 10px 5px #888888;
	text-align: center; 
	border-radius: 20px; 
	font-size: 60px; 
	font-family: cursive;
	float: left;
	}
#rollBtn {
	height: 45px; 
	width: 80px;
	border: 2px solid black; 
	background-color: gray; 
	box-shadow: 3px 3px 2px #888888;
	text-align: center; 
	border-radius: 10px; 
	font-size: 18px; 
	font-family: cursive;
}
#sum {
	height: 100px;
	width: 80px;
	background-color: yellow;
	border: 2px solid black;
	border-radius: 10px;
	text-align: center;
	font-family: cursive;
	font-size: 36px;
	position: relative;
	top: 0px;
	left: 208px;
}

#landing {
height: 600px;
width: 600px;
background-color: green;
color: yellow;
-khtml-user-drag: element	
}
#land {
	height: 300px;
	width: 500px;
	background-color: red;
}

#coins {
	border: 2px solid black;
	width: 375px;
	height: 150px;
	padding: 5px 5px 5px 5px;
	position: absolute;
	top: 630px;
	left: 100px;
}
#c5 {
	width:100px;
	height:100px;
	border-radius:50px;
	font-size:48px;	
	line-height:100px;
	text-align:center;
	background:#fff;
	color:#000;
	border: 6px solid black;
	box-shadow: 10px 10px 5px #888888;	
	float: left;
	z-index: 7;
	
}
[draggable=true] {
    cursor: move;
}

</style>
</head>

<body>
<div id="landing">This red area allows dropping. <br /> I want the red box to work like a passline on a craps table.
<div id= "land" ondrop="drop(event)" ondragover="allowDrop(event)"><p>Dealer Says: <span id="dealer"></span></p><span id="passlineBet"</span> <span id="totalBet"></span></div>
I would like this drag and drop function to take my coin from the bottom placing it into the red box. <br />
<ol><li>My first goal is to have all three coins remain in the coin box, with a new instace of the data in the red box.</li>
<li>Next I want to drag another coin into the red box and have it update the text inside to read original number plus new number.</li>
<li>next I want the drop to calculate if the number in the red box is greater than the number in the coin bank I want to show an alert that we can't do that. </li>
<li>next I want to create an instance where if the roll of the dice equals a number and that number exsists in the red box then take the coin number and report a message and add the bet amount plus the win amount to the bank and reset the position of all coins.
</li>
</ol>
</div>

<div id="diceRoll"><div id="die1"></div> <div id="die2"></div> <div><button id="rollBtn" onclick="play()">Roll</button></div><div id="sum"></div>
</div>
<div id="coins">
<div id="c5" draggable="true" class="circle" ondragstart="drag(event)" ondrop="dropcopy(event)">5</div>
<div id="c10" draggable="true" class="circle" ondragstart="drag(event)" ondrop="dropcopy(event)">10</div>
<div id="c20" draggable="true" class="circle" ondragstart="drag(event)" ondrop="dropcopy(event)">20</div>
Amount in Coin Bank: <span id="balance"></span></div>
<script>
var win = 0;
var lose = 1;
var rolling = 2;
// other variables used in program
var firstRoll = true; // true if first roll
var totalDice = 0; // sum of the dice
var myPoint = 0; // point if no win/loss on first roll
var gameStatus = rolling; // game not over yet
var bank = 150;
var bet = 0;
var dealer = 0;
function play() {

	if ( firstRoll ) { // first roll of the dice is crucial in this game.

//set the totalDice variable to the results of the roll.
totalDice = rollDice();
// create a switch to choose the game play.
switch ( totalDice ) {
	
case 7: case 11: // win on first roll
// set the gamestatus to win for this roll.
gameStatus = win;
myPoint = 0;
// set the stat div to show a winner on the first roll comeout.
document.getElementById("dealer").innerHTML = "7 11 come out Winner!";

break;

case 2: case 3: case 12: // lose on first roll
gameStatus = lose;
myPoint = 0;
// set the stat div to show losing
document.getElementById("dealer").innerHTML = "Craps You Lose!";

break;

default: // remember point
gameStatus = rolling; // set the gamestatus to rolling
myPoint = totalDice;  // set the point to the dice total
// report the point and a comment in the stat div
document.getElementById("dealer").innerHTML = "Still Rolling!<br />Point is:<br />" + myPoint;
firstRoll = false; //return the firstroll status to false to continue rolling
}
} else {
totalDice = rollDice(); // set the total of dice to the roll
if ( totalDice == myPoint ) { // win by making point
	gameStatus = win; // sets the game status to win
	myPoint = "";
	// reports in te stat div the win by point
		document.getElementById("dealer").innerHTML = "Winner! You made your Point!";
				
	 } else if ( totalDice == 7 ) { // lose by rolling 7
	gameStatus = lose; // set the game status to lose
	myPoint = "";
	// report in the stat div player loses
		document.getElementById("dealer").innerHTML = "Seven Out!";
	 }

if ( gameStatus == rolling ) {
	
// this is where I would check other bets besides the pass bet.
} else {
if ( gameStatus == win ) { //check if gamestatus equals win then add the bet to the bank
bank = bank + bet;
// report the new balance
document.getElementById("balance").innerHTML = bank;
firstRoll = true; // set the firstroll to true so the dice are right
} else {
// losers get removed from the player account
bank -= bet;
document.getElementById("balance").innerHTML = bank; // report your losses
firstRoll = true; // reset the roll to first
}
}
}
}

function makeBet() {
		if(firstRoll) {
			if(bank < bet) {
				alert("Not enough money in the bank to make that bet!");
			} else {
					}
		} else {
			alert("you need to make a pass bet to roll the bones!");
		}
		}

function rollDice() {

var die1 = Math.floor( 1 + Math.random() * 6 );
var die2 = Math.floor( 1 + Math.random() * 6 );
var workSum = die1 + die2;

		document.getElementById("die1").innerHTML = die1;
		document.getElementById("die2").innerHTML = die2;
		document.getElementById("sum").innerHTML = workSum;
		document.getElementById("balance").innerHTML = bank;
		return workSum;
}

function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev) {
	
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));

}

</script>

</body>
</html>


I made the changes you suggested.
But I want to be able to drag a copy and drop a copy leaving the coin in the bank.
I realize the other coins are not described.
take a look I updated as above
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6833
  • View blog
  • Posts: 28,342
  • Joined: 12-December 12

Re: using copy property with native drag and drop.

Posted 27 December 2013 - 02:23 PM

You could adapt code like this:

function dropcopy(ev) {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    var copyimg = document.createElement("img");
    var original = document.getElementById(data);
    copyimg.src = original.src;
    ev.target.appendChild(copyimg);
}

found here at SO. This is for an image but the same principles apply for a div.

Or you could use cloneNode.
Was This Post Helpful? 0
  • +
  • -

#5 DangerousDave   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 06-May 13

Re: using copy property with native drag and drop.

Posted 27 December 2013 - 02:25 PM

I saw that code but could not figure out how to make it work. do I create a new div then give it a new id name or how can I make it add the coins if anotherne is added?
Was This Post Helpful? 0
  • +
  • -

#6 DangerousDave   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 06-May 13

Re: using copy property with native drag and drop.

Posted 27 December 2013 - 02:31 PM

<div id="c5" draggable="true" class="circle" ondragstart="drag(event)" ondrop="dropcopy(event)">5</div>
function dropcopy(ev) {
	    ev.preventDefault();
	    var data=ev.dataTransfer.getData("Text");
	    var copydiv = document.createElement("div");
	    var original = document.getElementById(data);
	    copydiv = original.div;
	    ev.target.appendChild(copydiv);
	}


Do I need to put some code on the target as well?
Was This Post Helpful? 0
  • +
  • -

#7 DangerousDave   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 06-May 13

Re: using copy property with native drag and drop.

Posted 27 December 2013 - 02:39 PM

ok so here it is again complete this time.(y I made example ie. less lines of code.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Help me Fix it</title>
<style>
#diceRoll {
height: 150px;
width: 300px;
border: 2px dashed black;
background-color: green;	
position: absolute;
top: 300px;
left: 650px;
}

#die1 {
	height: 100px; 
	width: 100px;
	border: 2px solid black; 
	background-color: red; 
	box-shadow: 10px 10px 5px #888888;
	text-align: center; 
	border-radius: 20px; 
	font-size: 60px; 
	font-family: cursive;
	float: left;
}
#die2 {
	height: 100px; 
	width: 100px;
	border: 2px solid black; 
	background-color: red; 
	box-shadow: 10px 10px 5px #888888;
	text-align: center; 
	border-radius: 20px; 
	font-size: 60px; 
	font-family: cursive;
	float: left;
	}
#rollBtn {
	height: 45px; 
	width: 80px;
	border: 2px solid black; 
	background-color: gray; 
	box-shadow: 3px 3px 2px #888888;
	text-align: center; 
	border-radius: 10px; 
	font-size: 18px; 
	font-family: cursive;
}
#sum {
	height: 100px;
	width: 80px;
	background-color: yellow;
	border: 2px solid black;
	border-radius: 10px;
	text-align: center;
	font-family: cursive;
	font-size: 36px;
	position: relative;
	top: 0px;
	left: 208px;
}

#landing {
height: 600px;
width: 600px;
background-color: green;
color: yellow;
-khtml-user-drag: element	
}
#land {
	height: 300px;
	width: 500px;
	background-color: red;
}

#coins {
	border: 2px solid black;
	width: 375px;
	height: 150px;
	padding: 5px 5px 5px 5px;
	position: absolute;
	top: 630px;
	left: 100px;
}
#c5 {
	width:100px;
	height:100px;
	border-radius:50px;
	font-size:48px;	
	line-height:100px;
	text-align:center;
	background:#fff;
	color:#000;
	border: 6px solid black;
	box-shadow: 10px 10px 5px #888888;	
	float: left;
	z-index: 7;
	
}
#c10 {
	width:100px;
	height:100px;
	border-radius:50px;
	font-size:48px;	
	line-height:100px;
	text-align:center;
	background: yellow;
	color:#000;
	border: 6px solid black;
	box-shadow: 10px 10px 5px #888888;	
	float: left;
	z-index: 7;
	
}
#c20 {
	width:100px;
	height:100px;
	border-radius:50px;
	font-size:48px;	
	line-height:100px;
	text-align:center;
	background: red;
	color:#000;
	border: 6px solid black;
	box-shadow: 10px 10px 5px #888888;	
	float: left;
	z-index: 7;
	
}
[draggable=true] {
    cursor: move;
}

</style>
</head>

<body>
<div id="landing">This red area allows dropping. <br /> I want the red box to work like a passline on a craps table.
<div id= "land" ondrop="drop(event)" ondragover="allowDrop(event)"><p>Dealer Says: <span id="dealer"></span></p><span id="passlineBet"</span> <span id="totalBet"></span></div>
I would like this drag and drop function to take my coin from the bottom placing it into the red box. <br />
<ol><li>My first goal is to have all three coins remain in the coin box, with a new instace of the data in the red box.</li>
<li>Next I want to drag another coin into the red box and have it update the text inside to read original number plus new number.</li>
<li>next I want the drop to calculate if the number in the red box is greater than the number in the coin bank I want to show an alert that we can't do that. </li>
<li>next I want to create an instance where if the roll of the dice equals a number and that number exsists in the red box then take the coin number and report a message and add the bet amount plus the win amount to the bank and reset the position of all coins.
</li>
</ol>
</div>

<div id="diceRoll"><div id="die1"></div> <div id="die2"></div> <div><button id="rollBtn" onclick="play()">Roll</button></div><div id="sum"></div>
</div>
<div id="coins">
<div id="c5" draggable="true" class="circle" ondragstart="drag(event)" ondrop="dropcopy(event)">5</div>
<div id="c10" draggable="true" class="circle" ondragstart="drag(event)" ondrop="dropcopy(event)">10</div>
<div id="c20" draggable="true" class="circle" ondragstart="drag(event)" ondrop="dropcopy(event)">20</div>
Amount in Coin Bank: <span id="balance"></span></div>
<script>
var win = 0;
var lose = 1;
var rolling = 2;
// other variables used in program
var firstRoll = true; // true if first roll
var totalDice = 0; // sum of the dice
var myPoint = 0; // point if no win/loss on first roll
var gameStatus = rolling; // game not over yet
var bank = 150;
var bet = 0;
var dealer = 0;
function play() {

	if ( firstRoll ) { // first roll of the dice is crucial in this game.

//set the totalDice variable to the results of the roll.
totalDice = rollDice();
// create a switch to choose the game play.
switch ( totalDice ) {
	
case 7: case 11: // win on first roll
// set the gamestatus to win for this roll.
gameStatus = win;
myPoint = 0;
// set the stat div to show a winner on the first roll comeout.
document.getElementById("dealer").innerHTML = "7 11 come out Winner!";

break;

case 2: case 3: case 12: // lose on first roll
gameStatus = lose;
myPoint = 0;
// set the stat div to show losing
document.getElementById("dealer").innerHTML = "Craps You Lose!";

break;

default: // remember point
gameStatus = rolling; // set the gamestatus to rolling
myPoint = totalDice;  // set the point to the dice total
// report the point and a comment in the stat div
document.getElementById("dealer").innerHTML = "Still Rolling!<br />Point is:<br />" + myPoint;
firstRoll = false; //return the firstroll status to false to continue rolling
}
} else {
totalDice = rollDice(); // set the total of dice to the roll
if ( totalDice == myPoint ) { // win by making point
	gameStatus = win; // sets the game status to win
	myPoint = "";
	// reports in te stat div the win by point
		document.getElementById("dealer").innerHTML = "Winner! You made your Point!";
				
	 } else if ( totalDice == 7 ) { // lose by rolling 7
	gameStatus = lose; // set the game status to lose
	myPoint = "";
	// report in the stat div player loses
		document.getElementById("dealer").innerHTML = "Seven Out!";
	 }

if ( gameStatus == rolling ) {
	
// this is where I would check other bets besides the pass bet.
} else {
if ( gameStatus == win ) { //check if gamestatus equals win then add the bet to the bank
bank = bank + bet;
// report the new balance
document.getElementById("balance").innerHTML = bank;
firstRoll = true; // set the firstroll to true so the dice are right
} else {
// losers get removed from the player account
bank -= bet;
document.getElementById("balance").innerHTML = bank; // report your losses
firstRoll = true; // reset the roll to first
}
}
}
}

function makeBet() {
		if(firstRoll) {
			if(bank < bet) {
				alert("Not enough money in the bank to make that bet!");
			} else {
					}
		} else {
			alert("you need to make a pass bet to roll the bones!");
		}
		}

function rollDice() {

var die1 = Math.floor( 1 + Math.random() * 6 );
var die2 = Math.floor( 1 + Math.random() * 6 );
var workSum = die1 + die2;

		document.getElementById("die1").innerHTML = die1;
		document.getElementById("die2").innerHTML = die2;
		document.getElementById("sum").innerHTML = workSum;
		document.getElementById("balance").innerHTML = bank;
		return workSum;
}

function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev) {
	
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));

}
function dropcopy(ev) {
	    ev.preventDefault();
	    var data=ev.dataTransfer.getData("Text");
	    var copydiv = document.createElement("div");
	    var original = document.getElementById(data);
	    copydiv = original.div;
	    ev.target.appendChild(copydiv);
	}

</script>

</body>
</html>





again I updated the server http://dangerousdave...tagaincrap.html
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6833
  • View blog
  • Posts: 28,342
  • Joined: 12-December 12

Re: using copy property with native drag and drop.

Posted 27 December 2013 - 02:42 PM

    copydiv = original.div;

This line is not valid, and I am not sure what you are expecting it to do.

It looks like you essentially copied and pasted the code I posted; you won't make much progress this way. You need to understand, and modify, the code.

Using this approach you would create a new DIV containing the essential characteristics of the original div/coin - particularly its class-name, but not its id. Then append this new div to the target.

I would personally use cloneNode().
Was This Post Helpful? 0
  • +
  • -

#9 DangerousDave   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 06-May 13

Re: using copy property with native drag and drop.

Posted 27 December 2013 - 02:54 PM

function dropcopy(ev) {
	    ev.preventDefault();
	    var data=ev.dataTransfer.getData("Text").cloneNode();
	    ev.target.appendChild(document.getElementById(data));
	        
	}



I though this would work. It did not but it also did not break it. I don't know why the coin bank empties.
Was This Post Helpful? 0
  • +
  • -

#10 DangerousDave   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 06-May 13

Re: using copy property with native drag and drop.

Posted 27 December 2013 - 03:11 PM

So I got this code to work
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
ev.preventDefault();
}
but now I need it to check if the instance exists and if it does create a variable of bet for the field equal to the innerHTML. then add it up in the landing if another coin is dropped.
if(#c5 || #c10 || #c20) {
bet = innerHTML;
if(bet && newDrop) {
add newDrop to bet
bet = coin.innerHTML;
} else {
bet =coin.innerHTML;
}
} else {
bet=0;
}



thats just pseudo code but you might get the Idea.
re-posting the page on the server now.

This post has been edited by andrewsw: 27 December 2013 - 03:14 PM
Reason for edit:: Fixed code tags

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1