Выделение только droppable, который зависает или к которому помечен элемент.

Question

Что я хотел бы сделать, так это установить цвет границы в синий для элемента .droparea, который содержит элемент .item.

Также есть эффект зависания для .droparea, который меняет цвет границы на синий.

Так что, если я двигаю .item элемента к другому .droparea он должен автоматически изменить цвет границы для текущей .droparea до синего и изменить границы ранее использовали .droparea по умолчанию цвет (черный).

$(document).ready(function() { 
 
    $(".item").draggable({ 
 
    scroll: false, 
 
    revert: 'invalid', 
 
    stack: false, 
 
    create: function() { 
 
     $(this).data('position', $(this).position()) 
 
    }, 
 
    cursor: "pointer", 
 
    start: function() { 
 
     $(this).stop(true, true) 
 
    }, 
 
    drag: function(event, ui) { 
 
     $(".droparea").removeClass("highlight"); 
 
    } 
 
    }); 
 
    $(".droparea").droppable({ 
 
    accept: ".item", 
 
    drop: function(event, ui) { 
 
     $(this).addClass("highlight").find("p"); 
 
     snapToMiddle(ui.draggable, $(this)); 
 
    } 
 
    }); 
 
}); 
 

 
function snapToMiddle(dragger, target) { 
 
    var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true))/2; 
 
    var leftMove = target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true))/2; 
 
    dragger.animate({ 
 
    top: topMove, 
 
    left: leftMove 
 
    }, { 
 
    duration: 200, 
 
    easing: 'linear' 
 
    }); 
 
}

.item { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
} 
 
.droparea { 
 
    width: 150px; 
 
    height: 150px; 
 
    float: left; 
 
    margin: 2px; 
 
    border: 1px solid #000; 
 
    outline: 1px solid transparent 
 
} 
 
.highlight { 
 
    border: 1px solid blue 
 
} 
 
.droparea:hover { 
 
    border: 1px solid blue 
 
}

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script> 
 

 
<div class="droparea"> 
 
    <div class="item"></div> 
 
</div> 
 

 

 
<div class="droparea"></div> 
 
<div class="droparea"></div>

Answer 1

Несколько вещей, чтобы отметить здесь:

• JQuery UI перетаскивать только регулирует стиль элемента, он не меняет свою позицию в DOM, Так .item всегда будет быть ребенком первого перетаскиваемого, и так как вы указали псевдо-селектор CSS :hover - .droparea:hover, вы всегда будете парить в первом droppable при перетаскивании с ты паришься, это ребенок.
• Мы можем исправить эту проблему, установив класс highlight при наведении указателя мыши с помощью опции перетаскивания hoverClass, но поскольку вы удаляете highlight во время события drag, набор классов при наведении будет немедленно удален. Поэтому мы не должны удалять класс при перетаскивании.
• Наконец, вы можете использовать утилиту jQuery UI position() для выравнивания по центру элемента при капле.

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

$(document).ready(function() { 
 
    $(".item").draggable({ 
 
    scroll: false, 
 
    revert: 'invalid', 
 
    stack: false, 
 
    cursor: "pointer", 
 
    }); 
 
    $(".droparea").droppable({ 
 
    accept: ".item", 
 
    hoverClass: "highlight", 
 
    drop: function(event, ui) { 
 
     var $this = $(this); 
 
     $(".highlight").removeClass("highlight"); 
 
     $this.addClass("highlight"); 
 
     ui.draggable.position({ 
 
     my: "center", 
 
     at: "center", 
 
     of: $this, 
 
     using: function(pos) { 
 
      $(this).animate(pos, 200, "linear"); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
});

.item { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
} 
 
.droparea { 
 
    width: 150px; 
 
    height: 150px; 
 
    float: left; 
 
    margin: 2px; 
 
    border: 1px solid #000; 
 
    outline: 1px solid transparent 
 
} 
 
.highlight { 
 
    border: 1px solid blue 
 
}

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script> 
 

 
<div class="droparea"> 
 
    <div class="item"></div> 
 
</div> 
 

 
<div class="droparea"></div> 
 
<div class="droparea"></div>

---

Кроме того, я, чтобы предупредить вас, что JQuery UI и CSS с плавающей точкой имеют плохая история, что очевидно, если вы посетите bugs.jqueryui.com. Вам лучше использовать display:inline-block для этой цели, вы даже можете избежать внесения изменений вручную.