jQuery UI: draggable on dragenter

Question

Я следую за this guide для jQuery перетаскиваемого элемента.

Единственное, что я пропустил, - это dragenter и dragleave событиях, чтобы поиграть с CSS временных элементов. Он предоставляет только свойство hoverClass для элементов droppable, когда перемещаемые элементы перемещаются на них. Как насчет того, нужно ли нам менять CSS других элементов?

Текущий код выглядеть следующим образом:

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

В дополнение к этому, мне нужно что-то вроде:

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

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

но не работает при использовании draggable() рядом.

Я также попытался:

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

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

что очень сбивает с толку, потому что его привязали к перетаскиваемым и Droppable!

Answer 1

Я не уверен, что я точно понял ваш вопрос и что вам нужно сделать, но если вам нужно изменить css других элементов, вы можете использовать обработчики событий и out. Взгляните на jQueryUI documentation for Droppable. В основном вы хотите добавить класс, когда происходит событие over, и удалите класс при возникновении события out.

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"); 
     } 
    }); 
}); 

Большая часть приведенного выше примера кода взята из образцов droppabe jQueryUI, поэтому классы ui-widget-XXX не требуются/не подходят для вас, а только слева, чтобы выделить эффект.

Просто замените тело вызова функции тем, что необходимо предпринять, например.

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