Droppable example doesn't build

43 views
Skip to first unread message

Rudy

unread,
May 3, 2012, 12:15:53 AM5/3/12
to Juice UI
Sorry, total Juice UI newbie, and really a web app newbie as well.
Having trouble getting the simple example working from the Juice UI
website. It is supposed to illustrate how easy it is to make a drag-
drop example, but I get a lot of errors which makes me think I'm
missing something really basic. I'm trying to use the Droppable
control, documented here:

http://juiceui.com/controls/droppable

The draggable example worked fine, so I've gotten that far, but when I
paste the droppable example text into my C# web application, I get
errors that the style needs to be outside the form, outside the body,
etc - I keep moving it up the chain. Eventually it says "element style
needs to be in a parent element" - not sure where to put it if I can't
put it on the page. I suppose in a .css file? Also, it says the
<script> tag is missing a required attribute 'type'.

Any help would be much appreciated!


<style>
.draggable { width: 100px; height: 100px; padding: 0.5em;
float: left; margin: 10px 10px 10px 0; }
.droppable { width: 150px; height: 150px; padding: 0.5em;
float: left; margin: 10px; }
</style>

<script>
$(function(){
$( "#_Default" ).droppable( "option", "drop",
function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
);
});
</script>

<asp:panel ID="_Draggable" CssClass="draggable ui-widget-content"
runat="server">
<p>Drag me to my target</p>
</asp:panel>
<juice:draggable TargetControlID="_Draggable" runat="server"/>

<asp:panel ID="_Default" CssClass="droppable ui-widget-header"
runat="server" ClientIDMode="Static">
<p>Drop here</p>
</asp:panel>
<juice:droppable TargetControlID="_Default" runat="server"/>


Andrew Powell (appendTo)

unread,
May 4, 2012, 9:17:10 AM5/4/12
to jui...@googlegroups.com
It sounds like you have your environment setup to throw warnings as errors and to break on build. I'd highly recommend turning that off. The errors you mentioned aren't errors at all, and are all technically valid. Double check your editor settings and make sure you're validating against the HTML5 specification and not XHTML 1.0.

If you're going to be working with web applications / web sites in the future, beyond tinkering, I'd highly recommend learning HTML first.

This is a good site for HTML5 beginners as well http://www.html5rocks.com/en/

Andrew Powell (appendTo)

unread,
May 4, 2012, 9:18:05 AM5/4/12
to jui...@googlegroups.com
Reply all
Reply to author
Forward
0 new messages