How to determine if mouse is out of an element when dragging another one

Question

0.00/5 (No votes)

See more:

i have this 2 divs which i want drag the first and drop it into the second!
when it drops i disable dragging it for anymore drag option and change some css properties
of second div(drop Zone). i placed a button to reenable dragging of first div.
i want to change drop Zone css properties when i start dragging and mouse is
getting out of drop Zone. but i don't know how to do it.
here's my code:

html:

XML

<div id="draggable"><p>Drag me around</p></div>
<div id="droppable"><p><text>Drop it here</text></p></div>
<input type="button" value="Again" onclick="setDrag('#draggable')">

css:

CSS

#draggable{
    position: absolute;
    width: 200px;
    height: 100px;
    top: 200px;
    left: 500px;

    border-style: dashed;
    border-width: 2px;

    text-align: center;
}
#droppable{
    width: 250px;
    height: 150px;
    top: 400px;
    left: 600px;
    float: left;

    border-radius: 5px;
}
#droppable p{
    background-color: #666;

    margin-top: 0;

    height: 40px;

    text-align: center;
}
#droppable text{
    vertical-align: middle;

    color: #fff;
}
.free{
    background-color: #bbb;
}
.dropped{
    background: #F2F785;
    color: #F2F785;
}

jquery:

C#

$(function(){
    $("#droppable").toggleClass("free");
    $("#draggable").draggable(
        if(cursor.position.x){
            $(this > p > text).html();
            $(this).toggleClass("dropped");
            $(this).toggleClass("free");
        }
    );
});
$( "#droppable" ).droppable({
    drop: function( event, ui ) {
        $( this )
            .toggleClass("free")
            .toggleClass("dropped")
            .find( "p" )
            .html( "Dropped!" );
            $("#draggable").draggable("disable");
            flag = 0;
         }
    });
});
function setDrag(id){
     $(id).draggable("enable");
}

Posted 7-Sep-13 1:56am

Moosavi S.M.

Updated 7-Sep-13 2:02am

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 7-Sep-13 22:17pm

Is your problem changing the style or capturing the event?
—SA

Moosavi S.M. 8-Sep-13 2:31am

changing the style when dragging div is leaving dropzone!

Moosavi S.M. 8-Sep-13 3:08am

i mean i don't know how to capture leaving dragging div off dropzone!
what's the proper event(s)?

Sergey Alexandrovich Kryukov 8-Sep-13 3:15am

Why didn't you put this phrase in your previous comment? I wasted some time answering to a wrong part which you apparently already knew...
—SA

Sergey Alexandrovich Kryukov 8-Sep-13 3:32am

Please see my updates solution, after [EDIT].
—SA

1 solution

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)

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-09-07T20:39:00

Please see CSS jQuery methods: http://api.jquery.com/category/css/[^].

Most usually, such things are done using .addClass()/.removeClass, or, alternatively, .toggleClass():
http://api.jquery.com/addClass/[^],
http://api.jquery.com/removeClass/[^],
http://api.jquery.com/toggleClass/[^].

[EDIT]

As to handling the events, I'm not quite sure how you determine the drop zone, check that the moving object is in the zone and what you want to do when you drop in required zone or outsize of if. The simplest variant for the change in styles would be the location of the mouse pointer. Will that satisfy your criteria? If so, you can handle the separate group of events for the drop-zone object only. The best way to do it would be handling .hover():

JavaScript

dropZone = //.. some selector
droppable = $('#droppable');
dropZone.hover(function(){
   function() { // mouse goes in the drop zone
      this.toggleClass( /* ... */ );
      //and/or
      droppable.toggleClass( /* ... */ );
      //...
   },
   function() { // mouse goes out
      this.toggleClass( /* ... */ );
      //and/or
      droppable.toggleClass( /* ... */ );
      //...
   }
})

This way, you handle droppable separately, and moving in and out of the drop zone separately. I don't see why this simple schema may not work. If you need some more complex criteria, the code would be more complex, as you would need to take into account position of mouse and sizes of the two elements…

—SA