CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
reggie
reggie

Reputation: 3674

Dragging element and mouseout event

I have an div container that contains an element that can be dragged (with jQueryUI).

<div id="container" style="width:150px;height:100px;">
    <div id="child">dragme</div>
</div>

I add a border when hovering over the container element. I remove the border, when the mouse leaves the container.

$('#container').mouseover(function (event) {
    event.stopPropagation();
    $(this).css('border', '5px solid red');
});
$('#container').mouseout(function () {
    $(this).css('border', '0px');
});

$('#child').draggable({});

The problem: When I drag the child element, the border is not removed. The drag does not trigger the mouseout event. Is there another event that I could use to remove the border from the container when the mouse leaves it?

Upvotes: 1

Views: 1002

Answers (1)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

You need to use events.

$( ".selector" ).on( "dragstop", function( event, ui ) {
      $('#container').css('border', '1px solid black');
} );

API Documentation: http://api.jqueryui.com/draggable

Upvotes: 1

Related Questions