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???
Related
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
I have a mat-sidenav and a list of mat-item and mat-menu. Then when I hover over of one of the items I want the menu to display. This part is working. But then when I move off of that menu or item and over a new item I want its menu to display.
https://stackblitz.com/edit/angular-xsscrm
I have included a stackblitz with a demo of the behavior.
What is wrong here I have both on enter and exit, but then when I leave a menu on to a new one, it doesnt open unless I click on it.
Thanks for the help
The issue here is that when a menu opens, it creates an overlay with a backdrop that overlaps all elements. This backdrop is causing the mouse events to not be 'seen' by the listening element until the overlay is dismissed via a mouse click. Luckily, the menu control has a flag to remove the backdrop; setting this to false fixes the issue you're seeing.
Side note: you have an *ngFor on the <mat-list> element, but I think you want to move it to the <mat-list-item> element instead because you want many list items, not many lists. Since you're using the local variable of *ngFor outside of the <mat-list-item>, you can create an <ng-container> element to house your *ngFor. See below stackblitz:
https://stackblitz.com/edit/angular-xsscrm-kx6jyd
Another side note: this behavior is similar to a tooltip. Perhaps that would be a better control for your use-case? https://material.angular.io/components/tooltip/overview
been looking for a similar issue for a moment but couldn't find anything about that anywhere.
Working on an ASP.NET project and I need my asp:DropDownList to have it's elements sliding DOWN when selected.
When the selected item is the first one, everything is OK since I'm at the top of my element list, but if I select the dropdownlist when the selected item is like the XXth, the list will be displayed with a slide going up and down at the same time (that makes my currently selected item in the middle of the displayed list).
I want my list to be sliding down always, whatever my selected element position is (the same display as if the selected element was always the 1st).
Hope my question is clear.
If you need any screen, I'll send you some but it's probably not necessary.
Thanks by advance for your answers !
So in flex when you click on a drop down the list that pops out can either come below the drop down tab or above the tab. I'm guessing because if there isn't enough room below the screen it pops the list above the tab. How would I know if it expands above or below? As a side question, is there a way to control where the list pops up, say only to expand below the tab?
Yes you can either do like what gdcool mentioned from the link and build the whole menu for yourself. But I found an even easier solution and compared the mouseY properties as such:
var pointy:Number = this.contentMouseY;
var pointyDropList:Number = this.dropDown.mouseY;
So simply put the pointy variable determines the mouse Y position relative to the tab ("this" is the drop down object) and the pointyDropList variable determines the mouse Y position relative to the drop down list. If the drop down list expands below then pointyDropList variable will always be less than the pointy. Otherwise if the drop down list expands above the pointyDropList will always be greater than the pointy variable. So basically:
if(pointyDropList > pointy)
{
//the drop down is above the tab
}
else
{
//the drop down is below the tab
}
I currently have a navigation that is based on the bellow image. (sorry about the terrible sketch) I have a tab along the top called "films" that is also classed as a department.
I would like the tab "films" to open the sub cat films located in the department tab as though the mouse was hovered over that.
Currently the department "films" is a list item under an ordered list of department and has an ID of MM05.
The tab "films" is again another li in an unordered list for the top bar that originally had its own drop down.
Not sure how I can get around this!
This is sadly not possible just using CSS as "Cascading" means that you can only go downwards with your selectors.
You would have to use Javascript for this.
This would look something like this
<script>
var linkToOpenDropDown=document.getElementbyId("filmLink");
var dropDown=document.getElementbyId("dropDownList");
linkToOpenDropDown.onmouseover=function() {
dropDown.style.visibility='visible';
};
linkToOpenDropDown.onmouseout=function() {
dropDown.style.visibility='hidden';
};
</script>
From your drawing, I am thinking you will have a static DIV that holds a sub menu. So on click it would "visibility: hidden / visible" change to what you need. I assume that is the location where you want it to show, so mouse over wouldn't work since you can reach it from the button location with out going mouseout...
Please do provide little more code or info on this, thanks.
If i understood correctly, I would make that a onclick (show, hide) type DIV, and have that div with LI use onMouseOver Show / Hide additional panels