jQuery перетаскиваемая цель выбора за элементом с более высоким z-индексом - PullRequest
Новая
       26

jQuery перетаскиваемая цель выбора за элементом с более высоким z-индексом

2 голосов
/ 09 ноября 2011

Я использую перетаскиваемый пользовательский интерфейс jQuery. У меня есть стек элементов с z-индексами и один элемент, который полностью над перетаскиваемым контейнером. Я не могу установить его как перетаскиваемый, потому что события щелчка не проходят к нему, потому что он находится за другим элементом.

Как я могу получить доступ к этому элементу и заставить его реагировать на события мыши?

Мой CSS: 

#top {
    width:500px;
    height:500px;
    z-index:5;
    background-color:rgba(255,0,0,0.5);
    position:absolute;
}
#child {
    width:300px;
    height:300px;
    z-index:4;
    background-color:rgba(0,255,0,0.5);
    position:absolute;
    top:50px;
    left:50px;
}
#draggable {
     width:200px;
    height:200px;  
    z-index:4;
    background-color:rgba(0,0,255,0.5);
    position:absolute;
    top:10px;
    left:10px;
}

Мой HTML: 

<div id="top"></div>
<div id="child">
    <div id="draggable"></div>
</div>

И мой Javascript: 

$(function(){

    $("#draggable").draggable({
        containment: "child"
    });

});

Я также поместил весь этот код в JS Fiddle, чтобы продемонстрировать: http://jsfiddle.net/wvSqk/

Спасибо

Ответы [ 4 ]

3 голосов
/ 15 января 2013

Просто решил это без пересылки событий или чего-либо сложного - просто поместите другой, прозрачный слой поверх всего, и отметьте его как перетаскиваемый.и всякий раз, когда он перетаскивается, копируйте его положение на целевой слой под ним.
Что-то вроде этого: 

var $draggableOverlay = $("#draggableOverlay");
var $draggableTarget = $('#draggableTarget');

$draggableOverlay.draggable({
    drag: function() {
        $draggableTarget.css('left', $draggableOverlay.css('left'));
        $draggableTarget.css('top', $draggableOverlay.css('top'));
    }
});

Есть еще несколько настроек, которые можно применить, чтобы он выглядел хорошо, и закройте некоторые крайние случаи, ноэто работает.

1 голос
/ 09 ноября 2011

Был вопрос, подобный уже заданному: css 'указатель-события' свойство альтернатива для IE .

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

:)

1 голос
/ 01 ноября 2012

другое возможное решение - применить перетаскиваемый элемент к самому верхнему элементу и вернуть элемент, который на самом деле следует перетаскивать в качестве «помощника».просто отметьте, что на самом деле вы не должны передавать сам элемент для перетаскивания - как он удаляется после завершения перетаскивания - но его копию;что-то вроде: 

$( "#top" ).draggable({
  cursor: "move",
  cursorAt: { top: -12, left: -20 },
  helper: function( event ) {
     return $( "#draggable").clone();
  }
});

это только начало курса (например, оригинальный элемент должен быть скрыт, а 'cursorAt' должен быть рассчитан), но я рад помочь, если вам нужны дальнейшие рекомендациина этом.

0 голосов
/ 09 ноября 2011

Вы должны поставить #top div z-index ниже #child z-index

#top {
    ...
    z-index:3;
}

Если вы не можете изменить CSS, вы можете изменить его, используя jquery, когда мышь находится над #top div.

Нечто подобное 

 var oldValue=  $("#top").css('z-index');
 var newValue = $("#child").css('z-index')-1;

 $("#top").hover(function(){$("#top").css('z-index',newValue)},
                   function(){$("#top").css('z-index',oldValue)});

это немного глючит, но вы должны настроить. http://jsfiddle.net/wvSqk/4/

...