jQuery UI: draggable on dragenter

Question

I am following this guide for jQuery draggable item.

The only thing I miss is dragenter and dragleave events to play around with CSS of interim elements. It only provides hoverClass property for droppable elements, when draggable elements are moved on them. How about if we need to change the CSS of other elements?

Current code look like this:

$(".part").draggable({
    start: startDrag,
    stop: stopDrag,
    revert: true
});
$(".parts-action").droppable({
    accept: '.part',
    hoverClass: 'hovered',
    drop: handleDrop
});

In addition to that, I need something like:

$(".wrapper").on('dragenter', function (e) {
    $(this).next(".parts-action").show();
});

$(".wrapper").on('dragleave', function (e) {
    $(this).next(".parts-action").hide();
});

But its not working when using draggable() alongside.

I also tried:

$(".part").draggable({
    drag: handleDrag
})

function handleDrag(e, ui){
    /* how to know if active draggable is on some element other than droppable? */
}

which is very confusing because its tied to draggable and droppable!

Answer 1

I'm not 100% sure I exactly understood your question and what you need to do, but if you need to change the css of other elements then you can use the over and out event handlers. Take a look at the jQueryUI documentation for Droppable. You basically want to add a class when the over event fires, and remove the class when the out event fires.

JSFIDDLE DEMO

HTML

<div class="ui-widget-content part">
  <p>Drag me to my target</p>
</div>

<div class="ui-widget-header parts-action">
  <p>Droppable area 1</p>
</div>

<div class="ui-widget-header parts-action">
  <p>Droppable area 2</p>
</div>

<div class="ui-widget-header parts-action">
  <p>Droppable area 3</p>
</div>

CSS

.parts-action { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }    
.part { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }    
.parts-action-highlight { background: red; }

jQuery

$(function() {
    $( ".part" ).draggable();
    $( ".parts-action" ).droppable({
        accept: ".part",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
            $(this)
              .addClass( "ui-state-highlight" )
              .find( "p" )
              .html( "Dropped!" );
        },
        over: function( event, ui ) {
            $(this)
               .siblings(".parts-action")
               .addClass("parts-action-highlight");
        },
        out: function( event, ui ) {
            $(this)
              .siblings(".parts-action")
              .removeClass("parts-action-highlight");
        }
    });
});

Most of the above code sample is taken from the jQueryUI droppabe samples so the ui-widget-XXX classes are not required/relevant to you, just left in to highlight the effect.

Just replace the body of the function call with whatever action you need to take, e.g.

        over: function( event, ui ) {
            $(this)
               .siblings(".parts-action")
               .hide();
        },
        out: function( event, ui ) {
            $(this)
              .siblings(".parts-action")
              .show();