Develop Reference

Drag And Drop Vanilla JS with a generated div

Can someone explain to me how you can make a div dragable when the div itself is created only after you clicked on a button that will add the div like a to do list ? i

MDN has good documentation on how this works in vanilla js. You could start with something like this: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API.
It's unclear exactly what you're asking, though. How exactly do you want this div to appear - rendered somewhere on the page after clicking the button, then later dragged, or immediately in a dragging state, or something else?
The drag/drop API will support both of what I described above, but getting each to work requires different approaches. Clarification here would help.

Is it possible to make the background of FullCalendar calendar events transparent?

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.

jQuery UI Right-Click Menu AND General Advice Needed

So, recently I have been trying to build a user interface form builder that is almost entirely drag and drop. Kind of like Dreamweaver or visual studios I suppose. You guys can see it for yourselves HERE! I am trying to get a right-click menu thing going, however upon getting this working, I realized that it really conflicted with both the draggable and resizable methods. I don't have to right click at all, however when I go to resize or drag, it won't let me stop it. My cursor gets stuck either resizing or dragging, and requires vigorous clicking and shaking to free it. So, I'm assuming that I need a different plugin. Does anybody know of a stress free simple right-click menu that is hopefully compatible with jquery ui? I've tried google but most of them are simply a different version of the one I've already been using.
My second question is much more vague. As I previously mentioned, I'm trying to make a form builder. I'm wondering what the best way to go about this is as I feel sort of lost. My biggest problems right now are figuring out how I'm going to parse everything into code and export it. Does anybody know of anyone else who has attempted this or something similar? Is there any sort of guide?
I know the second questions has potential to be rather annoying, so feel free to only focus on the first one. Any help is appreciated, and I thank everybody who helps me.
EDIT: Just realized that you guys may not know how to use the builder. So far, all you can do is drag panels out onto the building space, and then drag tables within the panels. You can resize the building space, and panels vertically, and you can resize tables both vertically and horizontally. You can move panels and tables within their parent elements. Right click a panel or table for the contextmenu.
EDIT: So I think I found a context menu that will suffice, here it is. So, I guess that only leaves giving me advice on how to go about constructing this form builder.

Creating a scratchy ticket

Looking to create a scrathie ticket effect in javascript where a block is presented and you with the mouse) click and drag to reveal the image behind
Am determined not to use Flash
This is the best I could find so far in terms of an example script
http://www.siteexperts.com/tips/styles/ts37/page1.asp
Anyone know of a better more 'scratch-like' example with code?

Best bet would be to overlay a canvas over something, and scratch away the position of the mouse pointer.
jsFiddle.

Make DIV accept and handle drop via JavaScript possible?

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.