I want to build an interactive Flowchart App. The basic structure is already done (just a lot of input fields), but now I want to implement the function of commenting the flowchart.
The User should be able to drag a text box anywhere he wants on the screen and the location of the text box should be saved.
I'm already using React-dnd but I don't think this library fits. Do you have any recommendations which library or method I could use for this? Thanks in advance.
Design/Implement a state model diagram template solution.
This should use html/css/js to allow the ability to dynamically highlight the current workflow state for a given customer’s product.
we have used go js , it is licensed.
we have drawn rectangle and links editable save and jsn preview.
can we use this code?
We got solution like, we drawn image with some tools and highlighted with specific co-ordinates of the image with highlighted js plugin.
I'm learning how to write a Chrome extension and have implemented a simple plugin described at : http://developer.chrome.com/extensions/getstarted
The plugin I'm attempting to write needs to perform provide an option to perform based on text the user has highlighted within the page. Can point me in the direction of how to achieve this as I cannot seem to find documentation. So for example in below screen shot the selected text by user (the text is selected by using mouse to drag over text) is greyed out :
So if user right clicks on selected text an extra option is displayed which performs an action based on selected text.
Can provide tutorials/or any points on how to implement this functionality ?
Take a look at this answer for an example of how to get text selection back to your background page, https://stackoverflow.com/a/2645306/897414
Here goes the related API you wanted: https://developer.chrome.com/extensions/contextMenus
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 ...
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.