группировка перемещаемых объектов с перемещаемым jquery-ui

' collect rows to be deleted into range r

' Alternate loop construct using iterator (partial code - diff only)
' Dim i as Range
' For Each i in <column range> ' i.e. <EraseCol>2:<EraseCol>10000
'     If i.value Then
'         If r Is Nothing Then
'             Set r = i
'         Else
'             Set r = Union(r, i)
'         End If
'     End If
' Next i

' No need to step backward, this will only scroll up one time.
For i = firstDataRow to LastRow
    If Cells(i, eraseCol).Value Then
        If r Is Nothing Then
            Set r = Rows(i)
        Else
            Set r = Union(r, Rows(i))
        End If
    End If
Next i
r.EntireRow.Delete ' NO UNDO - wipes undo buffer
48
задан Kara 10 August 2017 в 00:12
поделиться

4 ответа

You could use the draggable's helper option to drag groups of items.

For example, if your draggables have checkboxes, you can return the selected items from the helper function like so:

$('#dragSource li').draggable({
  helper: function(){
    var selected = $('#dragSource input:checked').parents('li');
    if (selected.length === 0) {
      selected = $(this);
    }
    var container = $('<div/>').attr('id', 'draggingContainer');
    container.append(selected.clone());
    return container; 
  }
}); 

Demo

I've setup a demo with draggable images with checkboxes and somewhat fluid layout. Click "Run Code Snippet" at the bottom to see the result:

$(function() { $('#dragSource li').draggable({ helper: function() { var selected = $('#dragSource input:checked').parents('li'); if (selected.length === 0) { selected = $(this); } var container = $('
').attr('id', 'draggingContainer'); container.append(selected.clone()); return container; } }); $('#dropTarget').droppable({ tolerance: 'pointer', drop: function(event, ui) { $(this).append(ui.helper.children()); } }); $('#selectAll').click(function() { $('#dragSource input').prop('checked', true); return false; }); $('#selectNone').click(function() { $('#dragSource input').prop('checked', false); return false; }); $('#selectInvert').click(function() { $('#dragSource input').each(function() { var $this = $(this); if ($this.prop('checked')) { $this.prop('checked', false); } else { $this.prop('checked', true); } }); return false; }); });
body { font-family: sans-serif; overflow-x: hidden; } div { margin: 5px; padding: 0; } ul { margin: 0; padding: 0; } li { list-style: none; padding: 0; margin: 0; float: left; white-space: nowrap; } #selectActions span, #selectActions li { float: left; padding: 5px; } .droppableContainer { width: 48%; float: left; min-height: 200px } .droppableContainer li { height: 90px; width: 110px; margin: 2px; background-color: white; padding-bottom: 4px; } .droppableContainer img { width: 90px; max-height: 90px; max-width: 90px; width: 90px; vertical-align: middle; } .droppableContainer input { height: 90px; vertical-align: middle; } #draggingContainer { width: 48%; } #draggingContainer input { visibility: hidden; } #dropTarget { border: 3px dashed grey; } #dropTarget input { visibility: hidden; }
   
Select:
78
ответ дан 26 November 2019 в 18:51
поделиться

Идея производительности:

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

Когда вы опускаете мышь Событие / up для любого из дочерних элементов, на самом деле вы перемещаете этот групповой объект.

В целом это должно упростить его.

1
ответ дан 26 November 2019 в 18:51
поделиться

Это именно то, что я пытаюсь сделать. Пока что я не добился успеха, но я обнаружил , что этот парень сделал это очень сложным способом. Вы могли бы проверить это, может быть, вы могли бы сделать что-то с этим.

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

1
ответ дан 26 November 2019 в 18:51
поделиться

Я для этого создал функцию, которой вы передаете подчиненные / главные элементы, которая создает функцию bind () для главного (я разрешаю только перетаскивание из мастер в этом случае, вы можете обойти это, я уверен), что заставляет подчиненное устройство следовать за ним, используя стандартный jQuery css.

    function overlap(slave,master) {
        $('a#groupTheseBlocks').click(function(){
            master.bind('drag', groupBlocks);
            slave.draggable('disable');

            // remember where the slave is in relation to the master
            sLeftRef = (slave.offset().left - master.offset().left);
            sTopRef = (slave.offset().top - master.offset().top);
        });


        function groupBlocks() {
            var left = master.offset().left;
            var top = master.offset().top;

            slave.draggable('disable');
            slave.css('left', (left + sLeftRef) + 'px');
            slave.css('top', (top + sTopRef) + 'px');

        } 
    }

Думаю, я напишу еще об этом, когда у меня будет рабочий пример. В нынешнем виде это работает для меня. Чего не хватает, так это способа вызвать перекрытие (подчиненный, главный) с элементами, которые вы хотите сгруппировать вместе. Я делаю это очень специфическим образом. Я уверен, что вы можете придумать способ сделать это.

1
ответ дан 26 November 2019 в 18:51
поделиться
Другие вопросы по тегам:

Похожие вопросы: