Добавить класс CSS в элемент при перетаскивании через w/jQuery

Ответ 1

Да, это конечно возможно. jQuery UI предоставляет некоторые удобные опции и события для этого.

Во-первых, элемент перетаскивания всегда может ссылаться классом .ui-draggable-dragging во время его перетаскивания.

Затем метод droppable предоставляет событие с именем over, которое будет выполнять функцию всякий раз, когда над ним будет виден действительный перетаскиваемый объект. Итак, внутри этой функции мы можем обратиться к .ui-draggable-dragging и добавить к ней класс.

Out и drop также предлагаются, и мы можем нацелить элемент перетаскивания таким же образом. Вот как это выглядело бы:

$("#droppable").droppable({
    // tolerance can be set to 'fit', 'intersect', 'pointer', or 'touch'
    tolerance: 'intersect',
    // Add .hoverClass whenever #draggable is being hovered over #droppable
    over: function(event, ui) {
        $('.ui-draggable-dragging').addClass('hoverClass');
    },
    // Remove .hoverClass whenever #draggable is no longer hovered over #droppable
    out: function(event, ui) {
        $('.ui-draggable-dragging').removeClass('hoverClass');
    },
    // Add .dropClass whenever #draggable is dropped on #droppable
    drop: function(event, ui) {
        $('.ui-draggable-dragging').removeClass('hoverClass').addClass('dropClass');
    }
});

Приведенный выше код добавляет класс, когда #draggable пересекается с #droppable, а затем заменяет этот класс, когда #draggable отбрасывается на #droppable. Кроме того, .hoverClass удаляется, когда два элемента больше не пересекаются. Вот рабочий пример на jsfiddle.

Надеюсь, что это поможет.

Ответ 2

Мне было интересно использовать подготовленный объект ui, предоставленный обратным вызовом, поэтому вам не нужно снова делать запрос dom. каждый небольшой прирост производительности хорош, особенно при использовании drag and drop;-) ...

 over: function(e, ui) {
    $(ui.helper[0]).addClass("success");
  }

...

лучше.

Ответ 3

Нам не нужен jQuery UI. С помощью jquery/javascript мы можем добавить классы удаления.

Я покажу, как мы можем сделать это в JS.

Рассмотрим ниже HTML,

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

при драгстарте,

function drag(ev) {
  ev.dataTransfer.setData("id", ev.target.id);
}

при драгентере,

  function dragEnter(event) {
        var id= ev.dataTransfer.getData("id");
        document.getElementById(id).classList.add("mycalss");
     }

при падении,

function drop(ev) {
 ev.preventDefault();
 var id= ev.dataTransfer.getData("id");
 document.getElementById(id).classList.remove("mycalss");
 document.getElementById(id).classList.add("replacedclass");
}

Ответ 4

Не пробовал, но первая мысль, которую я имею, это собрать координаты x, y, высоту, ширину области, в которой вы хотите, чтобы он изменил класс. Затем, предполагая, что вы можете получить координаты x, y объекта, который перетаскивается, когда объект находится в пределах этих границ, добавьте класс, когда внешний класс удаляется.