Перетаскиваемый div Gridster.js с содержимым

Существует известная проблема с gridster: если у вас есть содержимое внутри маркера перетаскивания, вы не сможете перетаскивать его вместе с ним. Я получил ответ от создателя, в котором говорилось, что для решения этой проблемы используйте ignore_draging, но я пробовал это уже несколько часов, но безуспешно. Это пример, который мне предоставили

http://jsbin.com/fuwunuyi/6/edit

Я пробовал использовать это по-разному в течение нескольких часов и, похоже, не могу заставить это работать. Кто-нибудь успешно заставил это работать?

На всякий случай - вот документация для ignore_dragging - [ignore_drabbing] Object | Необязательная функция Массив имен узлов, которые не должны вызывать перетаскивание, по умолчанию ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON']. Если используется функция, верните true, чтобы игнорировать перетаскивание. (http://gridster.net/docs/classes/Draggable.html).

Любая помощь приветствуется!!


jquery gridster
person ajmajmajma    schedule 23.07.2014    source источник

Ответы (3)


arrow_upward
6
arrow_downward

У меня такая же проблема. Это сработало для меня:

  handle: 'header, header *'

Кажется, что вы можете указать несколько селекторов дескрипторов, разделенных запятой. Я попробовал «заголовок, диапазон», а затем заменил диапазон на «заголовок *». Это в основном означает все внутри заголовка.

Не нужно ignore_dragging

person Aebsubis    schedule 16.07.2015
comment
Я застрял на этой проблеме. Идеальный ответ. Спасибо :) - person New Bee; 26.05.2016

arrow_upward
0
arrow_downward

Я добавил «ручку» к вашему перетаскиванию. См. ниже код

$(function(){

  gridster = $(".gridster ul").gridster({
    widget_base_dimensions: [100, 120],
    widget_margins: [5, 5],
    draggable: {
      handle: 'header span',
      ignore_dragging: function (event) {

        return true;
      }
    }   }).data('gridster');

});

Убедитесь, что вы перетаскиваете элемент, который вы упомянули в перетаскиваемой ручке.

person Aghil V    schedule 23.07.2014
comment
дескриптор перетаскивания не проблема, если у вас есть дети внутри дескриптора перетаскивания, он больше не будет перетаскивать, предполагается, что игнорирование перетаскивания решит эту проблему - я просто не знаю, как это сделать. - person ajmajmajma; 23.07.2014
comment
@user3201696 user3201696 См. дескриптор: span 'header span' является дочерним элементом. После вставки дочернего элемента для перетаскивания вы должны сделать этот дочерний элемент своим дескриптором. Или другое решение - проверить, что ширина вашего пролета составляет 100%; Каждый раз, когда вы перетаскиваете его по промежутку, а не по заголовку. Если вы измените ширину диапазона на 100 пикселей и перетащите в другую область (например, заголовок), то перетаскивание также будет работать. ‹стиль› span { ширина: 100 пикселей; дисплей:блок; } ‹/style› В вашем коде нет дескриптора. Добавьте дескриптор в draggable и правильно назначьте его значение, вы сможете перетаскивать. - person Aghil V; 23.07.2014
comment
Спасибо, что нашли время ответить так подробно. Проблема не совсем в том, что внутри перетаскиваемого div есть что-то, что нельзя перетаскивать. Проблема такова: у меня есть элемент заголовка, в котором есть довольно много дочерних элементов div, и не только то, что содержимое этих элементов div уникальна каждый раз, когда он снимается с сервера. Так что в этом случае было бы наиболее удобно, если бы у меня был дескриптор перетаскивания как весь заголовок, поэтому это означало бы, что все также является дескриптором перетаскивания. Один из разработчиков ответил и сказал, что я могу использовать ignore_dragging, я просто не понимаю, как это сделать. - person ajmajmajma; 24.07.2014

arrow_upward
0
arrow_downward

У меня тоже был виджет-заголовок Div с синим фоном является заголовком виджета и дескриптором для перетаскивания, за исключением значка закрытия (x) с некоторым содержимым (внутри дочернего div с классом "имя виджета") и значок закрытия, чтобы удалить виджет. Я смог перетащить только пустое место в div-заголовке виджета.

draggable:
  handle: ".widget-header"

Итак, я изменил его на то, что указано ниже, и это сработало.

draggable:
  handle: ".widget-header, .widget-header .widget-name"
person chetang    schedule 03.12.2015