tuch / angular-dnd Goto Github PK
View Code? Open in Web Editor NEWDrag and Drop module for Super heroic 1.x AngularJS. Not jQueryUI. Touch supporting.
Drag and Drop module for Super heroic 1.x AngularJS. Not jQueryUI. Touch supporting.
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
, но в ответ в консоль падала ошибка.
Попытка перетаскивания по правой кнопке мыши приводит к появлению контекстного меню браузера и непонятному поведению. Нужно ограничиться только левой кнопкой.
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 😞
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.