Nano Hash - криптовалюты, майнинг, программирование

Angular сортировка пользовательского интерфейса + угловая сетка

Я пытаюсь объединить функциональность ui-sortable и angular-gridster, чтобы я мог вытащить элемент из списка и поместить его в изменяемую сетку. ui-sortable и angular-gridster имеют одинаковую структуру DOM:

<div>
    <ul>
        <li ng-repeat="item in items"></li>
    </ul>
</div>

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

Я создал этот CodePen, где вы можете перетащить его из сортируемого пользовательским интерфейсом списка "Ингредиенты" в список «Мой кофе». Перетаскивание в «Мой кофе» также обновляет угловую сетку «Кофейная сетка», поскольку «Мой кофе» и «Кофейная сетка» используют одну и ту же модель. То, что я хотел бы сделать, это перетащить прямо из «Ингредиентов» в «Coffee Grid».

Основное отличие, которое я вижу, заключается в том, что после настройки DOM Gridster выглядит так:

<div gridster>
    **<div ng-transclude>**
        <ul>
           <li></li>
        </ul>
    </div>
</div>

И ui-sortable выглядит так:

<div ui-sortable>
    <ul>
       <li></li>
    </ul>
 </div>

Итак, angular-gridster добавляет <div ng-trasclude>, заставляя меня думать, что у ui-sortable могут возникнуть проблемы с присоединением к элементам DOM, поскольку там есть этот неожиданный div.

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

start
activate x2
update
remove
receive
update
stop

где попытка перетаскивания в angular-gridster выглядит так:

start
activate x3
stop

Однако я не смог определить, почему обновление никогда не вызывалось и не возникало никаких ошибок.

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

angularjs angular-directive angularjs-ng-repeat angular-ui angularjs-scope
30.09.2014

Ответы:


1

Я выполнил то, что вы хотите, используя следующее расширение:

https://github.com/codef0rmer/angular-dragdrop

Я добавил следующие параметры к элементу gridster ul:

<ul data-drop="true"
    data-jqyoui-options="{hoverClass: 'widgetDropOver'}"
    jqyoui-droppable="{onDrop:'widgetDropHandler'}"> 
       <li>...</li>
</ul>

Мои элементы не поддавались сортировке, я просто использовал их так:

<a ng-click="widgetClickHandler()"
   data-drag="true"
   data-jqyoui-options="{revert: 'invalid'}"
   jqyoui-draggable="{animate:true, onDrag: 'widgetDragHandler', onStop: 'widgetDragStopHandler'}">
   element
</a>

Ниже приведены функции, которые я использовал для отслеживания состояния перетаскивания и создания элемента gridster:

$scope.widgetDragHandler = function() {
  $scope.widgetDragged = true;
};

$scope.widgetDragStopHandler = function() {
  $scope.widgetDragged = false; 
};

$scope.widgetDropHandler = function(event, ui) {
   // we only need the drophandler to reset the widget dragged state,
   // ng-click is always fired, so we handle the widget adding there
   $scope.widgetDragged = false;
};

$scope.widgetClickHandler = function(type) {
  // only use the click handler when the user is not dragging
  if ($scope.widgetDragged === false) { 
    // create a gridster item here
    // I am using a ng-repeat to populate the gridster items
    // and so I only need to push a new item here to the list
  }
}

Я использовал ng-click, потому что хотел, чтобы мои элементы загружались в gridster простым щелчком мыши, а также при перетаскивании.

Также, чтобы это заработало, вам нужно добавить следующее в свой css:

.gridster>ul {
  height: 100%;
}

ДЕМО: http://jsfiddle.net/n7z3cykz/

Надеюсь, это поможет вам начать.

07.06.2016
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..