Requesting help in jQuery or CSS.

Question

The background color, font color and border are being lost when I drop an element. How do I keep these properties intact? Here is the project in jsFiddle:

http://jsfiddle.net/n2learning/tV4n7/48/

Thanks!

Answer 1

Just needed a minor change to your CSS. I've removed the #routinefilter from this rule so it applies to all .droptrue elements, no matter what their parent element is:

.droptrue{
    background: lightgray;
    color: navy;
    margin:10px;
    padding:5px;
    border:2px solid #666;
}

Here's the working example.

Answer 2

Your CSS selector was specific to the point of origin, but not to the dropping-point. Add #dropTargetframe .droptrue to your selector, to give:

#routinefilter .droptrue,
#dropTargetframe .droptrue {
    background: lightgray;
    color: navy;
    margin:10px;
    padding:5px;
    border:2px solid #666;
}

Updated JS Fiddle.

Or you could simply remove the ancestor id from the selector, to give simply:

.droptrue {
    background: lightgray;
    color: navy;
    margin:10px;
    padding:5px;
    border:2px solid #666;
}

Updated JS Fiddle demo.

Answer 3

Your CSS rule:

#routinefilter .droptrue{

only applies to elements with a class droptrue WHILE they are in the container routinefilter. Once you drop them in the box, they are no longer inside routinefilter and the rule doesn't apply. Try changing that to just:

.droptrue{

Answer 4

This should do the trick.

#routinefilter .droptrue, #dropTargetframe .droptrue{
    background: lightgray;
    color: navy;
    margin:10px;
    padding:5px;
    border:2px solid #666;
}

The .droptrue elements will keep the same css style when inside the box as well!

Edit: You can also change it to only .droptrue if you want those boxes to use this style wherever they are.

Answer 5

Change

    #routinefilter .droptrue

into

    .droptrue

Edit: Whoops, too late :)

Answer 6

Add to CSS

.droptrue
{
    font: 16px serif 
    background: none repeat scroll 0 0 lightgray;
    border: 2px solid #666666;
    color: navy;
    margin: 10px;
    padding: 5px;
}