Перетаскивание пользовательского интерфейса jQuery с вкладками — перетаскивание элемента с вкладок в область перетаскивания, перетаскивание исчезает при нажатии на другую вкладку

У меня есть вкладки пользовательского интерфейса jquery с перетаскиваемыми элементами, у меня также есть выпадающая область справа от вкладок.

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

Мне нужно, чтобы все элементы, которые я перетащил с вкладок, были видимыми, пока я щелкаю между разными вкладками.

Я настрою jsfiddle, если потребуется, но, надеюсь, я достаточно объяснил, чтобы не волноваться об этом.

заранее спасибо, Финбар


jquery jquery-ui jquery-ui-draggable jquery-ui-tabs jquery-ui-droppable
person Finbar Maginn    schedule 03.02.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я уже воспроизвел проблему ;)

Это связано с тем, что вкладки скрывают контейнер и все его содержимое при изменении. Даже если вы попытаетесь настроить отображение элементов с помощью события activate, поскольку основной контейнер уже скрыт, он не будет отображать отдельные элементы. Таким образом, вы должны буквально перемещать перетаскиваемые элементы в выпадающую область. Вот код.

HTML

<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a>

        </li>
        <li><a href="#fragment-2"><span>Two</span></a>

        </li>
        <li><a href="#fragment-3"><span>Three</span></a>

        </li>
    </ul>
    <div id="fragment-1">
        <div id="draggable" class="ui-widget-content">
            <p>Drag me to my target</p>
        </div>
    </div>
    <div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
    <div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>

CSS

#draggable {
    width: 100px;
    height: 100px;
    padding: 0.5em;
    margin: 10px 10px 10px 0;
}
#droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    margin: 10px;
}

JQuery

$("#tabs").tabs();
$("#draggable").draggable();
$("#droppable").droppable({
    drop: function (event, ui) {
        var $x = ui.draggable;
        $x.appendTo($("#droppable")).css({
            top:0,
            left:0
        });
        $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
    }
});

Скрипка

Пример JSFiddle

person Ergec    schedule 03.02.2014