JQuery UI Draggable: пункт клон и отключить вторую затяжку же (исходной позиции)

У меня есть следующая ситуация:JQuery UI Draggable: пункт клон и отключить вторую затяжку же (исходной позиции)

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

Я хотел бы иметь отдельный список для столбцов каждой таблицы и список с (выбранными пользователем) столбцами из представления.

Я хочу, чтобы пользователь перетащил &, чтобы удалить столбцы из таблиц x, y, z в представление.

Я нашел интересный

<a href="http://jsfiddle.net/B5PH4/253">JSfiddle</a>

Это позволяет мне скопировать элементы списка из верхних дел до целевой DIV, но у него есть некоторые вопросы:

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

Я хорошо осведомлен о jQuery UI Sortable with Connect List. Но это, похоже, не дает мне необходимого уровня контроля над источниками/мишенями перетаскивания (вопрос 2 выше),

Вы сделали что-то подобное? Вы знаете, по крайней мере, часть решения? Или вы можете порекомендовать мне еще один плагин jQuery, который делает это?

Спасибо!

источник

2017-02-08 Adrian Suteu

Здесь я адаптировал списки в примере jquery, чтобы он был тем, что вы хотите.

Что происходит, сортировка1 & 3 - это таблицы и сортируемые 2 - это вид.

1 Только связанный сортируемый 1 & От 3 до 2, но не наоборот, чтобы остановить перетаскивание назад к столу, тогда была кнопка удаления, которая отделяет элемент и использует атрибут, чтобы вернуть его в нужное место. вы также можете следить за положением, как это также

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Sortable - Connect lists</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <style> 
 
    #sortable1, #sortable2, #sortable3{ 
 
    border: 1px solid #eee; 
 
    width: 142px; 
 
    min-height: 20px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 5px 0 0 0; 
 
    float: left; 
 
    margin-right: 10px; 
 
    } 
 
    #sortable1 li, #sortable2 li, #sortable3 li { 
 
    margin: 0 5px 5px 5px; 
 
    padding: 5px; 
 
    font-size: 1.2em; 
 
    width: 120px; 
 
    } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
    \t $("#sortable1, #sortable3").sortable({ 
 
     \t \t connectWith: "#sortable2" 
 
    \t }); 
 
\t $("#sortable2").sortable({}); 
 

 
\t $("#sortable1 span, #sortable3 span").click(function(event){ 
 
\t \t var item = $(event.target).closest('li'); 
 
\t \t $('#'+$(event.target).attr('parent')).append(item.detach()); 
 
\t }); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    
 
<ul id="sortable1" class="connectedSortable"> 
 
    <li class="ui-state-default">Item 1<span parent="sortable1" style="color: red">*</span></li> 
 
    <li class="ui-state-default">Item 2<span parent="sortable1" style="color: red">*</span></li> 
 
</ul> 
 
    
 
<ul id="sortable2" class="connectedSortable"> 
 
    <li class="ui-state-highlight">Item 1</li> 
 
    <li class="ui-state-highlight">Item 2</li> 
 
</ul> 
 

 
<ul id="sortable3" class="connectedSortable"> 
 
    <li class="ui-state-highlight">Item 1<span parent="sortable3" style="color: red">*</span></li> 
 
    <li class="ui-state-highlight">Item 2<span parent="sortable3" style="color: red">*</span></li> 
 
</ul> 
 
    
 
    
 
</body> 
 
</html>

источник

2017-02-09 02:53:50

Большое спасибо! Это именно то, что я искал. –

Если я поместил каждую ul в отдельный div с положением: relative, помощник ушел, как только я перетащил li за его исходный список (например, из # sortable1 в # sortable2). Все, что у меня осталось, - это указатель. Он по-прежнему работает, но выглядит ужасно. У вас есть идея, как это исправить? Мне нужны обертки с позицией: относительная для реализации Perfect Scroll. Если я удалю позицию: относительно CSS и оставлю все остальное, помощники вернутся. –

Эй @AdrianSuteu Я не могу воспроизвести это. Вот что я получил [jsfiddle] (https://jsfiddle.net/d0h8d0hk/). Возможно, это проблема с z-индексом ваших элементов? –

JQuery UI Draggable: пункт клон и отключить вторую затяжку же (исходной позиции)

ответ

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