Dragging issue in DIV

Question

In a DIV tag, I had appended a SPAN control by using the following script, at load

$("#<%=divDimensions.ClientID %>").append("<SPAN id='spnDrag' class='draggable' style='CURSOR:hand'>" + $(ui.draggable).text() + "</SPAN><br>");

where "divDimensions" is the DIV control.

And the jquery script I had wriiten for dragging the span control created above is as follows :

$("#<%= divDimensions.ClientID%> SPAN.draggable").draggable({
            appendTo: 'body',
            helper: 'clone',
            scroll: false,
            drag: function() {
                $('#<%=hdnNodeType.ClientID%>').val("DimensionBox");
            }
        });

But the issue is that I am unable to drag the span control created. Can you help me resolve this ?

And another issue regarding dragging is that, the draggable element gets disappeared while dragging over the FusionChart control, which I had to drag near to the FusioChart. Whats the solution for draggign over the FusionChart ?

Answer 1

You should suppress line breaks in erb output by adding a minus sign before the closing tags.

$("#<%= divDimensions.ClientID -%>").append("<SPAN id='spnDrag' class='draggable' style='CURSOR:hand'>" + $(ui.draggable).text() + "</SPAN><br>");

$("#<%= divDimensions.ClientID -%> SPAN.draggable").draggable({
        appendTo: 'body',
        helper: 'clone',
        scroll: false,
        drag: function() {
            $('#<%= hdnNodeType.ClientID -%>').val("DimensionBox");
        }
    });

Always have a look at the JavaScript console. It's a great tool to find bugs.