I'm implementing a functionality where the user can sort the list and re-order the elements, on dragover I want to show the droppable area below the dragover element.
Note: I want to achieve this using native javascript
Without seeing your code I can't suggest an exact implementation but you can use JS to inject a "placeholder" element.
First, you'll need to know the position of all your items, maybe use an array to log the order of your list items.
Next, on dragover append the placeholder element in the place of where the dragged item you are moving is located on the list. For example, if you have a list like:
ITEM 1
ITEM 2
ITEM 3
ITEM 4
When you drag ITEM 4 over ITEM 3 then inject the placeholder after ITEM 2 so it appears between ITEM 2 and 3. When you drop ITEM 3, you can remove the placeholder.
Note, you'll also have to remove the injected placeholder as you move further up/down the list. Otherwise, you'll end up with multiple placeholders.
There are also plugins available for this such as HTML5 Sortable and SortableJS
Related
I have a left and a right div. The left div contains a cdkDropList. What I want to archieve, is that the items of the DropList stay in the right div once dragged there. The Status quo is that they always move back into the DropList once dropped into something that is not a cdkDropList.
Basically I want to create a cdkDrag out of the elements of a cdkDropList. The elements of a DropList already are cdkDrags, however i cannot seem to seperate them from the DropList.
Edit:
I do not want to transfer an item from one list to another. I want to drag an item from a droplist and drop it anywhere i want. For example in the example documentaion take an item from the second example, and when dropped it becomes the third example.
A quick look at the Angular Material could've helped you way faster I guess.
Angular Material Documentation: Look for the last example => Drag&Drop connected sorting
And here is a Stackblitz example for that
I've got an application that allows a user to select a row in a Kendo Angular 2 grid and click a button that removes that row. After the row is removed, however, the grid selection persists on the index of the row that was just removed. I'd like to clear the grid's selection after the button is clicked and the row is removed. For the life of me, I cannot find a way to do this. Any ideas?
The Kendo Grid control has a property of "selectedKeys" which binds to an array of numbers. You can then clear this array when you want to clear the selection of the grid.
<kendo-grid
[selectedKeys]="mySelection"></kendo-grid>
In your code:
this.mySelection = [];
I have a list of items I want to make sortable. I would like to make that list scrollable, but at the same time I want the handle to pop out to the side of the list.
When clicking on an list item, I can have the pop out show outside the list (at this point, I know which li they have selected), and when they mousedown on a button in the popout, I create the sortable.
Can I create the sortable with the current li as the item being dragged?
The core issue here that I'm trying to work around is that I can make the pop out the handle IF it is a descendant of the item. But if I make the list scrollable, it will clip the handle so I can't pop it out to the right.
IF the pop out is not a descendant of the li, I can position it exactly where I want (to the right of the selected li) but now it cannot be used as the handle for the sortable (since it is not a descendant).
I am wondering if I can programatically create the sortable with the selected li as the item being dragged???
is there any way to either set a flex 4 list component to selectable "false" or disable/hide its selectioncolor? I've tried to change it designview, but it doesn't allow me change it that way. I've also tried tweaking it via the list component or the scroller/viewport control via as3, but I really can't seem to fin a way.
If you have a list that doesn't have selection, you can quickly change it into DataGroup. Sometimes I even prefer using DataGroup instead of the List and if I need to manage a selection I add the selection state to the items in the data provider, thus each item would know whether it is selected. This solution allows me to perform filtering, sorting, reordering on the list and still keep the selected state of the items.
try to put this on
ItemRenderer property
autoDrawBackground="false"
You could use an item renderer for the List, and set the selection color in the item renderer. Here are some examples of this:
Styling both foreground and background selection color in a Flex list/datagrid
It seems like it should be a simple concept. I need a vertical list. This list has an image with a checkbox and pathname of that image underneath it. The user should be able to check the checkboxes of the images they want to appear in their "shopping cart". The images, checkbox label, and list are populated by an XmlList. How can I do this in Flex 3.5 and Actionscript and have a button that when clicked, display a list of the checked items??
You need to write a custom list item-renderer.
Here are same docs http://livedocs.adobe.com/flex/3/html/help.html?content=cellrenderer_2.html