Drag and Drop color

JavaScript
1

I am presenting the user with two objects, one is a geometric shape and the second is a palette of colors. The intent is for the user to select a color from the palette and drag and drop that color in the shape. Any suggestions on how to do this; is it more appropriate to do in Javascript or PHP, is this even possible? Quite honestly, I don’t even know where to start.

1 Like
2

PHP is a server-side scripting language and is not used for manipulating elements in the browser on the fly.

That is something you would use JavaScript for. I have done drag-and-drop before with JQuery, but never a colour to a shape. I’m sure the folks in the JavaScript forum will have some useful tips for you.

I have moved your thread there to see if you get some good suggestions.

2 Likes
3

I was wondering, wouldn’t it be easier, for both the user and yourself, rather than dragging and dropping, simply to click on a colour and for that colour then to be applied to the shape?

4

I was trying to keep the description simple, in actuality I have multiple shapes to be “colored”.

5

Thank your for the response and moving to the JavaScript forum.

6

If you follow the tutorial on the above page, you’ll see two functions. It appears that once the drop is made, it can call a custom function at the end, such that the css code overwrites the css color of the object dragged to.

So, you would make the uncolored object with an id=“objColor”, for instance. In your CSS stylesheet, give the #objColor {background-color=“fff”}. Then when the color is dragged over the object, the function writes innerHTML for #objColor {background-color=“aaa”} which overwrites the original CSS. The color has to have an id attached that differentiates itself from all the other colors. You can do a break{} to cycle through all those colors, or make an array{} (this is over my head).

So those are some theoretical ways I would look to try it.

7

This works: Drag-n-Drop calls 2 functions (prerequisite: create small image and place as imgs/480x480.jpg.)

<!-- http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop -->
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#colorBox { width: 150px; height: 100px; clear: both; background-color: red;}
</style>

<script>
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));
writeText();
}

// Make something happen after the drag-n-drop takes place:
function writeText() {
var newEl = document.createElement("p");
var newPara = document.createTextNode("The picture is in the box above and color of box below has changed.");
newEl.appendChild(newPara);
document.getElementById("textAppear").appendChild(newEl);
coloringBox();
}

function coloringBox() {
var orig = document.getElementById('colorBox');
orig.style.backgroundColor = 'green';
}

// Can also make add to cart visually. Dragging item deposits id, function pulls id from row and creates shopping list. 
</script>
</head>
<body>

<p>Drag the image into the rectangle, the text appears below:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="imgs/480x480.jpg" draggable="true" ondragstart="drag(event)" width="330" height="50">
<div id="textAppear"></div>
<div id="colorBox"></div>
</body>`
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.