change background of div after drag&drop

Question

5.00/5 (1 vote)

See more:

I have code in file .aspx:

XML

<div id="divml5" class="dragDiv1"  runat="server" style="width:40px; height:40px;position:relative;                                        left:120px;top:60px;">  
        <table>
            <tr>
                
                <td>
                    <h5 id="h5ml5" class="handler" runat="server"
                            style="background-image:url('../../Images/image.jpg');
                                    vertical-align:middle;width:40px; height:40px;background-repeat:no-repeat;"></h5>
                </td>
            </tr>
        </table>
    </div>

This is a paragraph code that processes drag&drop:

XML

<script src="../Js/jquery-1.3.1.min.js" type="text/javascript"></script>
    <script src="../Js/jquery.dragndrop.js" type="text/javascript"></script>
    <script type="text/javascript">
       $().ready(function() {
            var lat;
            var log;
            $('.dragDiv1').Drags({
                handler: '.handler',
                onDrop:function(e){
                    $('.content').html('Div Position:(Left:' + e.pageX + ' ,Top:' + e.pageY + ')');
                        lat = e.pageX;
                        log = e.pageY;
                        getLat();
                        getLog();
                }
            });
           function getLat(){
                return lat;
            }
            function getLog(){
               return log;
           }


        });
    </script>

After drag&drop that element , I want to change it's background. In file .cs, I wrote:

MIDL

divml5.Attributes["style"] = "position:relative;top:" + @"getLat()" + "px;left:" + @&quot;getLog()&quot;  + "px;";
                h5ml5.Attributes["style"] = "background-image:url('../../Images/otherImage.jpg');vertical-align:middle;width:" + 40 + "px; height:" + 40 + "px;background-repeat:no-repeat;";

But in paragraph code in file .cs, I can't get coordination of element with function getLat() and getLog().
I don't know method to process coordinate of element in file .cs.
Please help me solve this problem.
Thank!

Posted 21-Nov-10 21:25pm

khidotlua

Updated 21-Nov-10 21:38pm

Sunasara Imdadhusen

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Manfred Rudolf Bihy · Answer 1 · 2010-11-21T21:56:00

Hello Khidotlua,

to change the background of the element with the id divml5 you don't need to write any code in your code behind file. Just use this modification of your javascript code:

$('.dragDiv1').Drags({
                          handler: '.handler',
                          onDrop:function(e){                     
                              $('.content').html('Div Position:(Left:' + e.pageX + ' ,Top:' + e.pageY + ')');
                              lat = e.pageX;
                              log = e.pageY;
                              $('divml5').style.backgroundColor = "#XXYYZZ"; //Some color value to your liking.
                              getLat(); //Function return value ignored????
                              getLog);  //Funciton return value ignored ??? 
                          }
                     });

OnDrop event handler will now color the divs ("divml5") background.

Cheers

Manfred

Sunasara Imdadhusen · Answer 2 · 2010-11-21T21:54:00

Solution 1

Hi
Please try following:

MIDL

string style = "position:relative;top:<script language='javascript' type='text/script'>getLat();</script>px;left:<script language='javascript' type='text/script'>getLog();</script>px";
        divml5.Attributes.Add("style", style);
        h5ml5.Attributes.Add("style","background-image:url('../../Images/otherImage.jpg');vertical-align:middle;width:40px; height:40px;background-repeat:no-repeat;");

Posted 21-Nov-10 21:54pm

Sunasara Imdadhusen

Comments

Manfred Rudolf Bihy 22-Nov-10 4:03am

Well, I'd be the last to complain if this where possible, but including script tags within a style attribute does sound just a bit too adventurous to me, sorry. I have never seen that done before ;)

Manfred Rudolf Bihy 22-Nov-10 5:34am

Please somebody tell me that this works. I'd be totally flabbergasted, dumbfounded and befuddled to say the least.

Sunasara Imdadhusen 22-Nov-10 5:51am

No, the style is not inside the style, First execute getLat() and getLog() function and it will stored a value with style in style variable then setup style for div.

khidotlua 22-Nov-10 6:01am

but, I don't success when trying implement it.

Manfred Rudolf Bihy 22-Nov-10 6:43am

@Sunasara: This code of yours is in the code behind file. The string variable style contains CSS style attributes sprinkled with the html script tag. Style variable is set into divml5.Attributes via Add("style"...
Thus html gets sent to the browser where script tags are embedded and quotes don't match. I truely think that this cannot work.