I'm using the angular drag drop list library for drag/drop of items in a list. Currently I see the item is draggable throughout the body of the page. How can I limit the drag area to only to a particular zone and not everywhere. I checked their API but I don't see any option for that.
In the plunker example you cannot drag and drop every where, only on html element with dnd-draggable
<ul dnd-list="list">
<!-- The dnd-draggable directive makes an element draggable and will
transfer the object that was assigned to it. If an element was
dragged away, you have to remove it from the original list
yourself using the dnd-moved attribute -->
<li ng-repeat="item in list"
dnd-draggable="item"
dnd-moved="list.splice($index, 1)"
dnd-effect-allowed="move"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}"
>
{{item.label}}
</li>
</ul>
Related
i have a test to automate drag and drop item in angular Js application page. When i click on source element and drag it my destination element xpath is getting changed.
I tried to use selenium action class with below code , but it didn't work for me.
Code Example 1
//CustomListItemElement = source element
// MainPanelElement = destination element
var action = new Actions(_webDriver);
action.DragAndDrop(CustomListItemElement, MainPanelElement);
action.Build().Perform();
Code Example 2
var action = new Actions(_webDriver);
action.MoveToElement(CustomListItemElement);
action.ClickAndHold(CustomListItemElement);
action.MoveByOffset(240, 52);
action.MoveToElement(MainPanelElement);
action.MoveByOffset(799, 53);
action.Release(MainPanelElement).Perform();
there is no error and test pass. it drags the element to destination , but didn't release it. (i think because destination xpath changeafter dragging it)
can someone help me with this please?
Updated:
Source Element:
<li class="bar-list-item ng-scope drag-list-tool-item" ng-repeat="toolItem in toolboxItems | filter:filterFunction" drag-list-tool-item="toolItem" draggable="true">
Destination Element:
<ul drag-list="day.Items" drag-list-id="day.AgendaID" create-from-tool="createAgendaItem(itemType)" on-item-added="onItemAdded(index, item, $index)" on-item-moved="onItemMoved(fromIndex, toIndex, item, $index)" class="bar-list drag-list ng-scope">
<!-- ngRepeat: item in day.Items -->
</ul>
After source element drag in to destination element it's changed to below.
<ul drag-list="day.Items" drag-list-id="day.AgendaID" create-from-tool="createAgendaItem(itemType)" on-item-added="onItemAdded(index, item, $index)" on-item-moved="onItemMoved(fromIndex, toIndex, item, $index)" **class="bar-list drag-list ng-scope list-drag-over"**>
<!-- ngRepeat: item in day.Items -->
</ul>
Using AngularJS, I have a list of messages that I display in a div that is marked as pre-scrollabe and inside is a bootsrtap list-group to display the individual messages:
<div class="pre-scrollable">
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in MessageList">
<!--Directive to Display Messages-->
</li>
</ul>
</div>
This yields the result that i want, a list of messages through which I can scroll. However I would like to know if there is a way that I can scroll to the top (or even the bottom for that matter) of the list using a JS function?
I'm using angular-dragdrop to move images from on div to another div. As each div has its own $scope list, when I drop an element from one to another list, the list which receives the item is updated.
However when I drop an item into the droppable area, it goes to top-left corner. It does not stay where I dropped
this is my html
Draggable
<div class="sand-image" ng-repeat="item in filtered = (products | filter: {cat : config.category.id}:true) |
itemsPerPage: pageSize"
current-page="currentPage"
data-drag="true"
data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
ng-model="products"
jqyoui-draggable="{index:$index,applyFilter:'{{getIndex(item)}}',
placeholder: 'keep',deepCopy :true}"
></div>
Droppable
<div class="wrap" id="sand-ground"
data-drop="true"
ng-model='box'
jqyoui-droppable="{multiple:true, deepCopy:true ,onOver :'stop',containment :'position'}" >
<!-- item html -->
<div class="draggable" ng-repeat="item in box track by $index" resizable ><img src="{{item.url}}" ></div>
The item in the second list ( dropable ) has a directive ( resizable )to set some info to the item.
How can I make the dropped item stay on dropped position?
$scope.dropAction = function(event, ui) {
console.log('left:', ui.position.left, 'top:', ui.position.top, ui);
// update model
var newItem = {
left:, ui.position.left,
top:, ui.position.top
};
$scope.someList.push(newItem);
};
Since you can capture the position in your drop function, I decided to just update a model that manages the positions of each draggable item. In your drop function:
jqyoui-droppable="{onDrop: 'dropaction($event)'}"
Then in your markup you can repeat through the items and use the stored property to position them with inline ng-style.
ng-repeat="item in someList" ng-style="{'left': item.left, 'top': item.top}"
These are the basics of what I did and you will most likely have to expand it to fit your usage. In my case, this captures pixels and I am converting to percentages in order to get responsive positions. I also launch a $uibModal that takes more information about my item before I place it.
I have a list of items with a checkbox for each item. I'm using CSS3 animations (this particular CSS http://daneden.github.io/animate.css/) and Angular to manipulate this list. I've managed to animate adding a new element to the list, but I'm having trouble animating removal of an item from the list (e.g. deleting or checking the checkbox).
This is what a list item looks like:
<li ng-class="{'animated fadeInDown' : task.isNew, 'animated fadeOutRight' : delete}" class="list-group-item" ng-repeat="task in tasks | filter:{is_done: false}" ng-mouseover="hovering = true" ng-mouseout="hovering = false">
<input type="checkbox" ng-model="task.is_done" ng-click="toggleDone(task)">
<span class="done-{{task.is_done}}" ng-hide="editing" ng-dblclick="editing = true">{{task.name}} </span><a href ng-show="hovering" ng-click="deleteTask(task); delete = true">x</a>
</li>
When I add a new task, the property task.isNew is set to true which sets 'animated fadeInDown' class to the list element. However, when I click on delete link, I would expect the class to be 'animated fadeOutRight' and that the removal is actually animated. This doesn't happen though, the item is removed but no animation is displayed.
I'm creating a sitemap in a custom CMS powered by Angular.
I hide the lower levels of pages and toggle their visibility with a button. I add ng-animate to animate the "opening" of the lower levels of the sitemap.
This works fine for the <ul>, but I would rather have its child <li> enter with a longer transition-delay for every item for a nice waterfall effect and this is where I get stuck.
At first I figured simply adding a transition-delay to the <li> would be sufficient, but for whatever reason I'm even unable to add a regular transition to the <li>. I read about the -stagger class, but it never gets applied.
Markup:
<ul>
<li ng-repeat="page in data"
ng-class="{'children-visible': isVisible}"
ng-init="isVisible = false">
{{page.pagename}}
<button ng-if="page.sub"
ng-click="$parent.isVisible = !isVisible">
</button>
<ul ng-if="page.sub"
ng-show="isVisible"
ng-animate="'animate'">
<li ng-repeat="page in page.sub">
{{page.pagename}}
</li>
</ul>
</li>
</ul>
Here's a picture of the markup if it helps you, er, picture it:
If relevant, I use version 1.2.16 of both angular.js and angular-animate.js.
So, in short: How do I add a stagger/transition delay to children of an element with ng-show?