Drag and Drop color

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

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.


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?

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

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

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.

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 -->
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#colorBox { width: 150px; height: 100px; clear: both; background-color: red;}

function allowDrop(ev) {

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);

function drop(ev) {
var data = ev.dataTransfer.getData("text");

// 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.");

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. 

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

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

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