jQueryUI droppable, остановить распространение на перекрывающийся брат
Как вы можете видеть здесь:http://jsfiddle.net/rA4CB/6/
когда я делаю падение в перекрываемой области, оно получено в обоих droppables, greedy не работает, когда элементы являются братьями и сестрами. Есть ли способ заблокировать прием на droppables ниже в zIndex?
кстати, mouseOver не будет срабатывать для элемента droppable, поскольку мышь фактически находится над перетаскиваемым элементом.
соответствующий JS:
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
tolerance:'pointer',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#droppable2" ).droppable({
tolerance:'pointer',
greedy:true,
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
9 ответов
хорошо, поэтому я трачу час, пытаясь понять это, а затем, как только я спрашиваю, я нахожу свой ответ
изменил JS следующим образом:
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
tolerance:'pointer',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#droppable2" ).droppable({
tolerance:'pointer',
greedy:true,
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
},
over: function(event, ui){
$( "#droppable" ).droppable( "disable" )
},
out: function(event, ui){
$( "#droppable" ).droppable( "enable" )
}
});
});
$( "#droppable" ).droppable({
greedy: true,
drop: function( event, ui ) {
if(ui.helper.is(".dropped")) {
return false;
}
ui.helper.addClass(".dropped");
}
});
просто установите класс css в ui.помощник перетаскивать. Если перетаскиваемый был принят один раз, он будет отклонен всеми другими сбрасываемыми (может быть сделано с параметром droppable "accept", тоже , как accept : ":not(.dropped)" и класс добавлен в ui.перетаскиваемый.)
Если у вас количество droppable в контейнерной зоне, что тогда????
вы должны подумать об этой проблеме. жадина работает только для отношения родитель-ребенок не в братья и сестры. Поэтому вы должны отредактировать droppable js или поставить свою собственную логику для него.
поэтому, если у вас есть номера droppable, вы должны написать дополнительный код для обработки падения на perfect droppable, как в этом примере ряд из братьев и сестер droppables
для создания идеальной братья и сестры droppable изменить droppbale ниже
var topElement = undefined;
var topElementArray = Array();
$( "#draggable" ).draggable();
$( ".droppableBox" ).droppable({
activeClass: "active-droppable",
tolerance:'pointer',
over: function( event, ui ) {
// This is for only show a message that z-index must be required for proppable
// you can remove it after testing or after development
if ($(this).css("z-index") == 'auto') {
alert("Please provide z-index for every droppable.");
return;
}
//
topElement = undefined;
topElementArray = Array();
// Change it as you want to write in your code
// For Container id or for your specific class for droppable or for both
$('#demo > .droppableBox').each(function(){
_left = $(this).offset().left, _right = $(this).offset().left + $(this).width();
_top = $(this).offset().top, _bottom = $(this).offset().top + $(this).height();
if (event.pageX >= _left && event.pageX <= _right && event.pageY >= _top && event.pageY <= _bottom) {
topElementArray.push($(this).attr('id'));
}
});
},
drop: function( event, ui ) {
if (!topElement) {
topElement = determineTopElement(topElementArray);
}
if ($(this).attr('id') == $(topElement).attr('id')) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
// Your code after successful dropped element on specific siblings
// Start writing code for dropped element & perfect droppable
}
}
});
determineTopElement = function(_array) {
var topElement;
var zIndexHighest = 0;
for (i = 0; i < _array.length; i++){
var element = $("#"+ _array[i]);
var z_index = $(element).css("z-index");
if( z_index > zIndexHighest){
zIndexHighest = z_index;
topElement = element;
}
}
return topElement;
}
в некоторых circonstances :
myjQuery.droppable({
over:function(evt,ui){
ui.draggable.attr('drg_time', this.drg_time = evt.timeStamp)
},
accept:function(draggeds){
if(draggeds.attr('drg_time'))
{
return draggeds.attr('drg_time') == this.drg_time
}
return draggeds.hasClass('acceptable_classes_here')
},
out:function(evt,ui){
// useless but cleaner
ui.draggable.removeAttr('drg_time')
}
drop:...,
})
Я считаю, что использование метода #invertedSpear вызовет изменение состояния пользовательского интерфейса, что в некоторых случаях нежелательно. Вот код.
var lastOpertion = new Date().getTime();
drop: function (event, ui) {
if (new Date().getTime() - lastOpertion < 100) return;
lastOpertion = new Date().getTime();
....
}
Итак, при попытке найти простое решение я придумал это (и это работает для меня):
window.overNowOnThis = "";
window.olderOnes = [];
$obj.droppable({
accept: ".draggable_imgs",
drop: function(e, ui) {
if(window.overNowOnThis == this){
// Do whatever
}
},
over: function(event, ui){
window.olderOnes.push(window.overNowOnThis);
window.overNowOnThis = this;
},
out: function(){
var lastElem = window.olderOnes.pop();
window.overNowOnThis = lastElem;
}
});
верхний элемент будет выбран, потому что на нем "за" стреляет последним. Кроме того, если есть более двух братьев и сестер, то при выходе из элемента мы устанавливаем последний как текущий. Например, использование глобального "окна". Лучшим вариантом будет использование классов, поскольку он может безопасно хранить данные.
это очень похоже на ответ invertedSpear. Мне пришлось немного изменить его, потому что включение/отключение внутри "over"/"out" не сработало для меня .Я должен был сделать ниже вместо
$("#droppable2").droppable({
greedy: true,
drop: function (event, ui) {
$("droppable").droppable("disable");
}
}
мне пришлось явно включить" droppable " div, когда мне это было нужно. Например, включите его при запуске события drag. Например!--3-->
$("#drageMe").draggable({
start:function(event,ui){
$("droppable").droppable("enable");
} })
попробуйте жадный вариант в ui dropable. см. ссылку скрипки ниже для демонстрации:
http://jsfiddle.net/creators_guru/3vT5C/embedded/result/
$( ".circles" ).droppable({
greedy: true,
drop: function( event, ui ) {
$_data = ('drgged class = ' + ui.draggable.attr('class'));
$_data1 = ('droped id = #' + $(this).attr('id'));
$('#data').html($_data + '<br/>'+$_data1);
return false;
}
});