tuch / angular-dnd Goto Github PK

Look at the example, if dnd-draggable set to true ng-click event never fired.
http://embed.plnkr.co/w5vP9BK3xVztYhVBe2OI/preview

You need to implement something like dnd-drag-delay option or dnd-drag-delta to start dragging after a few ms after onmousedown or after cursor were moved a few pixels away from start point with button hold pressed. Something similar is done in angular-ui-tree https://github.com/angular-ui-tree/angular-ui-tree

Привет, у меня создан объект такого плана:

<div class="gem"
                                     ng-repeat="gem in getGems(gemFilter) track by $index"
                                     ng-style="{'background-image': gem.image,
                                                    'background-color': gem.bgColor}"
                                     uib-tooltip-html="getGemTooltip(gem)"
                                     tooltip-placement="top"
                                     tooltip-append-to-body="true"
                                     tooltip-animation="false"

                                     dnd-draggable="true"
                                     dnd-draggable-opts = "{layer: 'layer1', helper : 'clone'}"
                                     dnd-on-dragstart = "inventoryDragStart(gem)"
                                     dnd-on-dragend = "inventoryDragEnd()">
                                </div>

При перетаскивании появляется ошибка:
Uncaught TypeError: Cannot read property '$$phase' of null
drag @ angular-dnd.js:1913
Dnd.trigger @ angular-dnd.js:943
Manipulator.progress @ angular-dnd.js:1230
Mouse.mousemove @ angular-dnd.js:1341
(anonymous function) @ angular-dnd.js:83
n.event.dispatch @ jquery.js:4435
r.handle @ jquery.js:4121

Добавилась эта прелесть в 0.1.20, раньше всё было норм. Точно не знаю, чем это вызвано, но вот тут похожая вещь: angular-ui/ui-tinymce#82

1 How to get the font size set by the dnd-fitted with rect model object.
2 When placing only the glyphicons icon inside the div with dnd, its not re-sizing it

When I disable draggable with angular directive like :

       <button  dnd-draggable="editionMode()"></button>

I can't scroll on mobile device with touch event.
I resolve problem with add a condition on Touch prototype "preventDefault" :

touchmove: function(event) {
            if (this.manipulator.isTarget()) {
                event.preventDefault();
            }

            this.manipulator.progress(event);
        },

I don't know if it's the best solution but can you take minutes to fix this issues plz ?
I don't want to fork your project just for it :-D

Please see the example http://embed.plnkr.co/H59foIrIvaVn7nPLM1mO/preview
second container has dnd-droppable="false", it correctly not calls onEnter and onLeave, but onDrop still fired.

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

Array.prototype.getObjByValue = function(key, value) {
  if (!this) return null;
  if (!value) return null;
  for (var ii in this) {
    if (this[ii][key] == value) {
      return this[ii];
    }
  }
  return null;
};

то, возникет конфликт в позициях где масив обрабатывается как объект
for(var key in regions) { ...
в какой-то момент regions[key] возвращает функцию getObjByValue и выдает ошибку.
с for (var key=0; key<regions.length; key++) {} было бы более правильно

Спасибо

All fine, but receive so huge log during dragging isn't necessary.

No work useAsPoint option:
http://plnkr.co/edit/sQqhYVlZwd2VxGTGoEA8?p=preview

Get an error trying to install on npm5+

As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use 'npm cache verify' instead.

Hi all!
Is it possible to use simultaneously two properties: dnd-sortable and dnd-draggable?

After i try to use them - i'm getting error in console, that says:

Error: $compile:multidir
Multiple Directive Resource Contention

Description
This error occurs when multiple directives are applied to the same DOM element, and processing them would result in a collision or an unsupported configuration.

To resolve this issue remove one of the directives which is causing the collision.

Example scenarios of multiple incompatible directives applied to the same element include:

Multiple directives requesting isolated scope.
Multiple directives publishing a controller under the same name.
Multiple directives declared with the transclusion option.
Multiple directives attempting to define a template or templateURL.

It's me doing something wrong, or is this not possible?

P.S. Sorry for bad English ^_^

Add to Bower?

Does this support nesting? I.e. dragging lists from a innner list to a parent list?

Можно ли реализовать опцию handle для dnd-sortable, аналогично dnd-draggable из #15 ?

Допустим, что у меня есть такая разметка:

<div id="draggable">
    <div id="drag-control"></div>
</div>

Элемент #draggable я делаю перетаскиваемым. Он занимает всю ширину экрана, и высотой 100 пикселей. Внутри него #drag-control, который размером 10 на 10 пикселей. Могу ли я сделать так, чтобы элемент #draggable перетаскивался только тогда, когда мы тащим за #drag-control?

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

Могу ли я повесть обработчики на событие завершения сортировки? Я пробовал сделать это через dnd-on-dragend, но в ответ в консоль падала ошибка.

Попытка перетаскивания по правой кнопке мыши приводит к появлению контекстного меню браузера и непонятному поведению. Нужно ограничиться только левой кнопкой.

1. Open http://plnkr.co/edit/sQqhYVlZwd2VxGTGoEA8?p=preview in browser window small enough for scrollbars to appear.
2. Scroll preview area, while draging yellow rectangle, either by draging rectangle to border or with mouse wheel.
3. Yellow rectangle moves away from cursor, at some point it freezes.

Please can we make a new release, and publish the latest to npm? We have only 0.1.24 available there, and we are waiting to take advantage of all of the bug fixes since September.

https://www.npmjs.com/package/angular-dnd-module

Thanks!

I can't find this feature in readme, so it is real?

If droppable-elements are right next to each other, the situation often arises when the dragenter event is invoked before the dragleave event. Because of this, there is an error in logic. ctrl.dropmodel overwritten with the new value, then the event is triggered dragleave with this value at the end of sets ctrl.dropmodel = undefined. As a result, we have a onedroppable-element in target array, but dropmodel = undefined.

See example: http://plnkr.co/edit/tdBHyg032OEK3Kn8ZQZw?p=preview

Hi. It's a really cool module.
Could you issue a new tag for 0.1.24 version and make it available through bower/npm?

I add the dnd-draggable directive to a div and it moves perfect in a horizontal way but it doesn't move at all vertically. I'm pretty sure it's an issue with my code but it's been a couple of days now and I can't find it. Can you suggest me what might be the problem?

The drag and drop not working in IE can you help me please

Прошу сюда писать пожелания, что бы знать, что улучшать в первую очередь

Если подвинуть элемент, затем переместить его и использовать скроллинг - позиция возвращается к предыдущему значению

Всем добрый день,
невозможно изменить размер потянув за уголки,
т.к. уголки спрятаны за горизонталями/вертикалями и недоступны для нажатия.
Для объекта
var defaults = {
handles: 'ne, se, sw, nw, n, e, s, w',
minWidth: 20,
minHeight: 20,
maxWidth: 10000,
maxHeight: 10000
};
нужно изменить handles, на:
handles: 'n, e, s, w, ne, se, sw, nw',
и они будут работать.

Еще, для уголков, горизонталей и вертикалей неплохо бы установить свои css курсоры:
s-resize, w-resize, nw-resize, ne-resize, только это я не знаю как.

Hi!
This could be that I did something wrong, but I suppose that it's bug. Sometime, when I'm draging sortable items, it's cloning - item left on its position plus adding new one.
Here is markup:

<div dnd-container dnd-sortable-list="properties.form_values">
    <div flex layout="column" style="overflow: auto; height: 100%;" ng-repeat="value in properties.form_values track by $index" dnd-sortable dnd-on-sortend="onSortEnd()">
        <md-input-container layout="row" class="md-icon-float md-icon-right md-block flex-box" ng-mouseover="hovering=true" ng-mouseleave="hovering=false">
            <input type="text" ng-model="value" ng-change="onChangeFieldValue($index, value)" />
            <md-icon md-font-set="material-icons" ng-show="hovering" ng-click="onDeleteFieldValue($index, $event)">clear</md-icon>
            <md-icon class="ng-isolate-scope" md-font-set="material-icons" ng-show="hovering" style="cursor: move;">format_line_spacing</md-icon>
        </md-input-container>
    </div>
</div>

P.S. I'm using angular 1.4.8
P.P.S. I'm Russian, but it's international web site, so let's use English - it will make search of issue for other developer easier.

Здравствуйте! В моем проекте необходимо реализовать перетаскивание элементов в 2 области, а не в одну, как у вас в примере. Не могли бы вы привести пример с ondrop($dragtarget) для нескольких областей. Заранее благодарен.

Hello!
If place tag input[type=text] in draggable container, it can't be focused. We discowered that it happens because of #1047 line of code:

event.preventDefault();

in mousedown function of Mouse.prototype.

Очень сложно начать пользоваться библиотекой без QuickStart Guide.
Может стоит добавить пример минимального использования drag-n-drop элементов без лишних css и js.
Может какой то такой вариант: http://embed.plnkr.co/ElwZjFIQh3N2HHe18Gse/preview ?

Hi again!
Very often after changing the block size it is stretched to a huge size.
Here's my code:

<div class="design-parent" ng-class="variable.opt.allowResize"  ng-controller="HelpController as Helper"
     dnd-draggable      = "true"
     dnd-draggable-opts = "{ layer: 'design-area' }"
     dnd-on-dragend     = "Main.dragEnd(variable)"

     dnd-resizable    = "true"
     dnd-on-resizeend = "Main.resizeEnd(variable)"

     dnd-rect  = "variable.env"
     dnd-model = "variable">
    <div class="design-children">
        <design-control></design-control>
        <div ng-include="Tpl.getObject(variable)"></div>
    </div>
</div>

Main.resizeEnd is:

self.resizeEnd = function (object, isGrid) {
    if(showLogs) { console.group('resizeEnd'); }

    isGrid = isGrid ? isGrid : false;

    var coords = getRoundedNumbers(object.env.width, object.env.height),
        minWidth, minHeight, maxWidth, maxHeight;


    if (isGrid) {
        minWidth  = 380;
        minHeight = 140;
        maxWidth  = 2600;
        maxHeight = 1400;
    } else {
        minWidth  = 180;
        minHeight = 40;
        maxWidth  = 600;
        maxHeight = 400;
    }

    // Here we limit the maximum size
    if (coords[0] < minWidth)  { coords[0] = minWidth;  debugIt(coords[0], '@resize.end.min-width'); console.log('wr1'); }
    if (coords[1] < minHeight) { coords[1] = minHeight; debugIt(coords[1], '@resize.end.min-height'); console.log('wr2'); }

    if (coords[0] > maxWidth)  { coords[0] = maxWidth;  debugIt(coords[0], '@resize.end.max-width'); console.log('wr3'); }
    if (coords[1] > maxHeight) { coords[1] = maxHeight; debugIt(coords[1], '@resize.end.max-height'); console.log('wr4'); }


    object.env.width  = coords[0];
    object.env.height = coords[1];
}

I do not understand why 😞