I have a calendar-like view that shows a table with one column per day of the week (see this image). Each row represents a specific thing that can be booked for a time. The idea is now that a booking can be extended by dragging the outer edge to the next day in the table, or shortened the same way. The active booking has a span on each side of the cell that is supposed to be the handle for dragging.
My main problem now is that the usual drag & drop features in browsers don't seem to fit my situation. I don't want to drag something and drop it anywhere else, I just want to drag to extend the item.
Is this still something that can be done with the usual HTML5 drag&drop feature or some generic drag&drop library? Or is there any other way to achieve this? Any pointers on how to approach this problem?
I'm using React for this, which might make some solutions difficult to integrate if they manipulate the DOM directly.
ummm not sure what to do here , I thinks its unlikely the link will change soon , I can describe the repo 'Allows individual or group selection of items using the mouse. Click and drag to lasso multiple items, hold the cmd/ctrl key to select non-adjacent items'. I can briefly describe what the lib code does: uses keydown, keyup and mousedown listeners to create an overlay and detect covered nodes in the DOM .
Related
From an end user point of view. If I have a list of vertical divs with different content in each div, should I provide up/down arrows to reorder the divs or should I allow the user to drag and drop the divs into a particular order?
Drag and drop would allow the user to place the div anywhere in the vertical list but may not be obvious to the end user that the divs are movable.
An up/down arrow beside each div would provide visual cues but would be awkward for the end user if they wanted to move a particular div up or down by a large number of places.
In relation to the above, I am biased towards drag/drop due to my use of Moodle for teaching. We did have a training course which overcame the visual cue issue. I'm aiming my app to be as user friendly as possible without having to teach the user too much (if anything).
Is there a particular CSS styling for a div that provides a cue - like a gripper hand to drag and drop and can I place some kind of visual cue around the div using CSS.
Any input is most welcome and I hope you understand what I'm trying to achieve here.
P.S. The vertical list can be quite long.
You may get some better answers to the usability questions on the User Experience Stack Exchange. My own anecdotal experience having used an interface where items could only be moved up or down one item at a time in a long list was that it was a total pain, and when drag-and-drop was finally implemented, it was a breath of fresh air.
I also have conducted a usability test (task 1 in this PDF) where a simple label of "Drag to add a new ..." (it was a duplication interface, not a reordering interface) on top of some pill-shaped elements (with a "grabby hand" cursor and change of color on hover) was quickly discovered by 8 out of 8 users without any prompting.
As for your technical questions, there are a few different CSS cursor styles you could implement (in particular, cursor: move;, cursor:grab,cursor:grabbing (my preference is for 'grab' on hover and 'grabbing' while dragging). I've shown some here: https://jsfiddle.net/xnho95oL/, as well an idea for some "placeholder" elements that might appear (and could presumably expand or otherwise change appearance when dragging an item over them).
I'm relatively new with web and I am using FullCalendar on a personal project and am trying to accomplish what I would think would be relatively easy. I may have to change some code around as I don't think what I want is available out of the box.
Here is a screenshot of my version of the FullCalendar I am using:
As you can see, I have several "events", well essentially they're a group of events and instead you just see the number of events for that day. So for Today, there are 10 events essentially, I just group them up. The problem is, you have to click above the event in order for the cell to select. I am trying to make it so that the event or the count text IS essentially the background without the rectangle, etc. See the screenshot below for what I am going for:
Making the eventColor transparent just makes the entire event disappear which is not what I want. I've also tried changing the background and border colors. The rectanglular shape is still present. Any ideas or possible suggestions regarding this? Thanks in advance for your help!
Not exactly sure what you mean, could you show us an example?
If you want the user to click "trhough" the event, you can use the CSS
pointer-events: none
This will ignore the mouse events (such as click) on this element, and then click on the one behind.
I have a simple DC.js bar chart. I have it set up so you can click on an element and it gets filtered. This is standard behavior. It remains lit up, and the others go dark. You can then select other elements and have them added to the filter.
I'm looking for a way to replicate that functionality without clicking on the element. So like, i click a link outside the chart and the chart acts like I just clicked on some element.
Has anyone seen this done before?
Thanks,
Edit:
The reason I'm trying to do this is for accessibility. There's no way for keyboard users to interact as far as I can tell.
A hacky way to do it is to use chart.select to get a d3 selection of the element you want, and then fire an artificial click event as described here:
How to invoke "click" event programmatically in d3?
A better way is to do what the base chart onClick does:
_chart.filter(filter);
_chart.redrawGroup();
https://github.com/dc-js/dc.js/blob/master/src/base-mixin.js#L610
where filter is the key you want to filter on.
Kind of a two-part question. First, in ExtJS 4, how would i go about attaching a hover listener (aka mouseenter, mouseout) to the rows of a grid panel?
Secondly, reason I want that event is so I can show a couple action buttons within one of the cells when any cell in the row is hovered over. What would be the most efficient way implement this menu (creating the actual html elements). My first thought was to create a renderer for the cell that will hold the menu and return the html for the buttons in that renderer, initially hidden. However that seems like it would be alot of extra html being put into the dom since those same buttons would be created for each row thats displayed in the grid.
Part 1:
You can do this by tracking the itemmouseenter and itemmouseleave events on the grid view. However, for these events to be fired, you need to make sure you enable trackOver on the grid view.
Note that this all applies to the grid view config, not the grid config, and that the trackOver config is off by default for performance reasons. You want to be careful about doing too much in these events.
Part 2:
A better way to do this may be to define an editor for the cell, which is a component containing the buttons you wish to use. You can trigger the editing with the events discussed in part 1. This will mean your buttons get reused in the same way other editors do, and can be Ext components rather that html cludges.
I had a similar issue with showing menus for toolbar buttons on hover (and hiding them on mouseout). I wrote up a HoverButton extension which you should be able to easily extend to be a HoverRow if you need, using the events mentioned in Simon's solution.
Ext.HoverButton
Hope it helps.
I've been googling and trying this for a good while now, but comes nowhere. So here goes:
What I want to do is to drop text on a DIV tag and handle that with JavaScript. Something along these lines:
<script type="text/javascript">
function handleDrop(sender, args)
{
$('#theDiv').html(args.textfromdrop);
}
</script>
<div id="theDiv" ondrop="handleDrop()" />
<br/>
<p>
This is some simple text. Draggable?
</p>
So, on this page I want to be able to drag contents from the paragraph for example to the div and it would handle the drop and change it's appearance accordingly (Or maybe just display that text, as long as it would handle it!). I've been trying with jQuery, but it seems to be a whole other model, and I can't set all my potential draggables as such because they should be able to come from everywhere. Is this even possible?
EDIT: Please correct me if I'm wrong, but these droppables all require a draggable to be dropped at it, right? What I would want is that you can drop text, pure text, from a page that you don't have any control of. This might sound weird, but it's for a firefox extension where you can drag content from a page to another page that resides in the side bar.
I would recommend using an established Javascript Library such as jQuery or YUI.
Have you considered creating a hidden textarea (ie with css style visibility:hidden) overlapping the div in question? Then check for drops with the onchange JavaScript event, or if that doesn't work, periodically the textarea's value for non-empty strings. I'm guessing your mileage will vary depending on the browser and operating system.
Or if you prefer Prototype like I do: http://wiki.github.com/madrobby/scriptaculous/droppables
EDIT: Based on your revised question: No, there's no way to allow a user to drop text from one page to another page. Not unless you do decide to build a FireFox extension like you were saying. Even if you could find a way around the security issue where you cannot script a page that's not under the same domain, you can only drag and drop DOM elements within the window/iFrame they're in.
I have done this before and it CAN be done without any library with some effort.
I've built the following methods:
Method that tracks your mouse movements.
Method to read and pass the content when you drop.
Used onmousemove and onclick events for the drag and drop methods.
OnMouseOver for the div area where you'd like to drop the text - to detect whether the pointer is over the container (div) or not.
Finally after dropping the text I deleted the original content (if needed) using innerHTML so it looks like it has been moved.
You can pretty much achieve a Windows like drag and drop functionality with this. I used it for drag and drop images, icons, etc.
If you need help with the coding I can give you some guidance, but most of it you will find if you Google around a little, then all you need to do is make them work together.