JQuery Droppable Highlight on Hover

Я хочу создать эффект, когда я в основном выделяю все поля (td) под перетаскиваемым div. Я знаю, пересекаюсь: «потрогать» делает трюк визуально, однако это оставляет меня с некоторыми проблемами:JQuery Droppable Highlight on Hover

перетаскиваемыми должен быть в состоянии навести и коснуться несколько ячеек в то время только - но только в пределах одной строки!
Я хочу запускать события в зависимости от положения остановки. Без использования пересечения у меня есть один конкретный td i drop on. Теперь у меня есть до 4. Но я хочу только первый для будущей обработки событий. Так что в основном внешний левый td он касается начальной позиции!

Любой способ скорректировать мой код для решения этих проблем? Я ничего не мог найти. Огромное спасибо!!

HTML:

<table> 
    <thead> 
    <tr> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="droppable"></td> 
     <td class="droppable"></td> 
     <td class="droppable"></td> 
     <td class="droppable"></td> 
    </tr> 
    <tr> 
     <td class="droppable"></td> 
     <td class="droppable"></td> 
     <td class="droppable"></td> 
     <td class="droppable"></td> 
    </tr> 
    </tbody> 
</table> 

<div class="draggable"> 
    <span>Draggable</span> 
</div>

CSS:

th, td { 
    border: 1px solid black; 
    width: 20px; 
    height: 20px; 
} 

.draggable { 
    background-color: green; 
    width: 75px; 
} 

.bg-change { 
    background-color: grey; 
}

JS:

$('.draggable').draggable(); 
$('.droppable').droppable({ 
    hoverClass: "bg-change", 
    tolerance: "touch" 
});

https://jsfiddle.net/ohfztugh/13/

источник

2016-08-06 Cataras

У меня есть два способа сделать это.

1. Первый Trick:

Вы можете использовать over и out способом для достижения этой цели.

Что-то вроде этого

$('.droppable').droppable({ 
    //hoverClass: "bg-change", 
    tolerance: "touch", 

    over: function(){ 

    $(this).parent("tr").siblings().removeClass("bg-change"); 
    $(this).parent("tr").addClass("bg-change"); 

    }, 

    out:function(){ 


    $(this).parent("tr").removeClass("bg-change"); 

    } , 

drop:function(){ 


    $(".droppable").parent("tr").removeClass("bg-change"); 
    $(this).parent("tr").addClass("bg-change"); 

    } 
});

Fiddle

Не совершенным. но это, безусловно, даст вам идею продолжить.

2. Второй способ сделать это

Просто сделайте ваш тр Droppable.и использовать torelance:"fit"

$('.draggable').draggable(); 
$('tr').droppable({ 
    hoverClass: "bg-change", 
    tolerance: "fit", 


});

Working Fiddle

или сделать tolerance:"intersect"

$('.draggable').draggable(); 
$('tr').droppable({ 
    hoverClass: "bg-change", 
    tolerance: "intersect", 


});

Working Fiddle 2

Если вы хотите, одна ячейка Droppable затем сделать это

$('td,th').droppable({ 
    hoverClass: "bg-change", 
    tolerance: "intersect", 


});

Working Fiddle 3

источник

2016-08-06 12:02:45

Спасибо за ответ, но это не совсем то, что я имел в виду. Я хочу добиться аналогичного эффекта здесь: http://fullcalendar.io/, где я могу навешивать событие на несколько ячеек и chaqnge на их фоне, а затем иметь самую левую ячейку в качестве моей «недоступной цели» – Cataras

ok, так как насчет этого https://jsfiddle.net/ohfztugh/20/ –

Это только подчеркивает, что мой курсор для меня закончился. – Cataras

Поскольку я не могу добавить эту скрипку в качестве комментария, я разместил ее как ответ.

$('.event').draggable({ 
    opacity: .7, 
    cursor: 'move', 
    revert: 'invalid', 

}); 
$('td').droppable({ 
    hoverClass: "hover", 
    tolerance: "touch", 

    drop: function (event, ui) { 
    if (false === dropped) { 
     $(this).effect("highlight", {}, 1500); 
     dropped = true; 
     $(ui.draggable).detach().css({ top: 0, left: 0 }).appendTo($(this)); 
    } 
    }, 
    activate: function (event, ui) { 
    dropped = false; 
    } 
});

активировать: предотвращает прикосновение к стрельбе несколько раз.

Working fiddle

Надеется, что это поможет вам в правильном направлении!

Извините за мой плохой английский!

(моя проблема заключается в том, что она всегда щелкает налево, а наиболее прикоснулся тд)

источник

2016-09-16 07:47:52

JQuery Droppable Highlight on Hover

ответ

Смежные вопросы