Gridster не динамически перемещает виджеты

Я пытаюсь использовать Gridster.js для выполнения некоторых функций перетаскивания в моем проекте.

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

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

Вот мой макет:

<div class="gridster">
     <div class="dragMe" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="2" data-col="2" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>

... ETC
</div>

а вот и мой js, готовый в доке

var gridster = $('.gridster').gridster({
            widget_margins: [5,5],
            widget_selector: '.dragMe',
            widget_base_dimensions: [264, 103],
            max_cols: 5,
            max_rows: 5,
            resize: {
                enable: true
            },
            draggable: {
                start: function(event, ui) {
                    dragged = 1;
                },
                stop: function(event, ui){
                    var id = this.$helper[0].attributes[0].value;
                    var row = this.$helper[0].attributes[1].value;
                    var col = this.$helper[0].attributes[2].value;
                    console.log(id, row, col);
                }, 
                items: '.dragMe',
                limit: true
            }
        }).data('gridster');

У меня есть и grister.js, и файл css. Есть предложения по улучшению?


javascript drag-and-drop jquery gridster
person Vnge    schedule 21.03.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, что в вашем коде есть что-то еще, что его портит; проверьте этот jsfiddle, я скопировал и вставил ваш код и только добавил:

.dragMe {
    background-color:#0f0;
}
.preview-holder {
    background-color:#000!important;
}

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

Если по какой-то причине вам нужно перетащить кнопку, я бы порекомендовал изменить ее на элемент без ввода/кнопки и смоделировать любую необходимую вам функциональность с помощью JavaScript.

Когда моя сетка доставляет мне проблемы, вот что я проверяю:

  • Все открывающие/закрывающие теги совпадают

  • атрибуты данных имеют смысл (Gridster сходит с ума, если виджеты перекрываются)

  • Стили применяются надлежащим образом — убедитесь, что они должны выглядеть так, как вы думаете.

    У меня было пару раз, когда я ожидал увидеть одну вещь, и потому что я не предполагал, что виноват javascript, но в нем отсутствовали стили CSS.

person ch1pn3ss    schedule 24.03.2014
comment
Вы, возможно, знаете, почему я не могу переместить некоторые виджеты? Мне не нужно перемещать кнопку, я могу перемещать ее контейнер. Сетка, с которой я работаю, представляет собой 5x5, теперь я переключился на неупорядоченный список, потому что я не мог никуда попасть. Мой первый столбец и мой последний виджет не хотят двигаться, пытаясь перетащить их, но они будут двигаться, когда другие будут перетаскиваться на их место. - person Vnge; 24.03.2014
comment
@Vnge Не видя больше кода и основываясь на этом описании, это звучит очень знакомо. Они ведут себя странно, и вы не можете это объяснить... вы пробуете разные форки, читаете о людях, которые это сделали, вы копируете и вставляете весь рабочий пример из jsfiddle в свой проект, и он все еще не работает... для для меня это была комбинация причин, которые я перечислил в своем ответе. Если вы можете предоставить скрипку с демонстрацией проблемы или ссылку, я проверю ее. - person ch1pn3ss; 24.03.2014
comment
@Vnge Это решило вашу проблему? Если да, не могли бы вы отметить это как решенное? Я пришел сюда по вашему запросу из другого вопроса :-) Если он все еще не работает, я был бы рад взглянуть на более конкретную проблему. Я могу заставить его работать в сетке 5x5, используя div, в соответствии с вашими первоначальными примерами кода. Я добавил больше блоков и обновил скрипт как таковой: jsfiddle.net/Ed6ED/3 - person ch1pn3ss; 26.03.2014
comment
одна проблема, почему некоторые из моих элементов не двигались, заключалась в том, что внутри некоторых кнопок не было четкого исправления. Я на самом деле не уверен, почему это было решением. но это определенно помогло! Я отмечу это как решенное - person Vnge; 26.03.2014
comment
Спасибо, рад, что смог помочь! Мои проблемы обычно возникают из-за стилей. Когда я действительно выхожу из строя, мне помогает удалить весь мой CSS и убедиться, что он работает только с демонстрационным CSS с их сайта, а затем постепенно обновить CSS до моего. (И, конечно же, убедитесь, что атрибуты данных имеют смысл) - person ch1pn3ss; 27.03.2014

arrow_upward
1
arrow_downward

Я думаю, что Gridster требует один элемент (например, div или ul) ниже элемента <div class="gridster">:

<div class="gridster">
     <div class="gridster-container">
         <div class="dragMe" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="2" data-col="2" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>

    ... ETC
     </div>
</div>

И JavaScript:

var gridster = $(".gridster div.gridster-container").gridster({...

Вы также можете использовать ul и li, как они используют на своем веб-сайте.

person Uri    schedule 01.04.2014