You guys would have seen the image cropping tool which has a selection option (marque tool) created in javascript.
http://marqueetool.net/examples/
Like this i want to get all elements under a selection.
For example in windows we have mouse group selection of files and folders by dragging the mouse to select multiple files. Like that i need to get all the elements under a selection in javascript. I can try other gimmicks but if there could be a simple tool then i can speed up my work.
have a look at the selectable ui , does exactly that lol ...
Related
want to achieve this image
With javascript and html
Anyone know any library from which i can achieve this
I want to adjust the selection with selection handle
I tried with selection api javascript but it didn't works well
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 .
I am trying to mimic a listbox as what would be available in MS visual studio. I have found HTML elements
select
and datalist
The problem is that these are really for data entry. What I had in mind is to have search results shown in a list but they are selectable? I need to know the index of the item(s) chosen so I can retrieve more additional detail for a subsequent screen. The elements above are more like drop downs. I want something like a textbox with a scroll bar that allows for multi select. Is that possible for HTML5?
I know VS had a form toolbox item that did just that.
Any advice?
Thanks in advance.
Matt
I am working on some graph visualizations, and I am using the JavaScript library graph Dracula. Now, with this library, when I want to move a node I have to click the node I want to move and move it on the desired place (with drag and drop). But, what I want to do is to select more nodes and move all of them. I can't figure out how to do this, since I am not so experienced in JavaScript programming. So, my question is:
How can I select multiple nodes with rectangle selection and move
them?
How can I select multiple nodes with, say, Ctrl + left click and select more nodes and then move them?
By the looks of things, almost all of Dracula's graph rendering is really managed by RaphaelJS.
In which case, things may be quite a bit easier for you. It seems other people have asked how to move elements in RaphaelJS.
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.