3 replies [Last post]
ykyuen
ykyuen's picture
Offline
newbie
Hong Kong
Last seen: 12 years 14 weeks ago
Hong Kong
Timezone: GMT+8
Joined: 2010-09-30
Posts: 3
Points: 4

Hi all,

i am new to css and jquery. i try to create a drag and drop feature as follow.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/black-tie/jquery-ui-1.8.4.custom.css" />
        <style type="text/css">      
            .dragArea {
                background-color: Blue;
                opacity: 0.5;
                width: 300px;
                height: 100px;
                padding-top:10px;
                padding-bottom:10px;
                padding-right:10px;
                padding-left:10px;
            }
 
            .dropArea {
                background-color: Red;
                opacity: 0.5;
                width: 300px;
                height: 300px;
                padding-top:10px;
                padding-bottom:10px;
                padding-right:10px;
                padding-left:10px;
            }
 
            .drag {
                width: 20px;
                height: 40px;
                border-style:solid;
                border-color:green;
                margin-top:10px;
                margin-bottom:10px;
                margin-right:10px;
                margin-left:10px;
                cursor: move;
            }
 
            .drop {
                width: 20px;
                height: 40px;
                border-style:solid;
                border-color:green;
                margin-top:10px;
                margin-bottom:10px;
                margin-right:10px;
                margin-left:10px;
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>SeeWee Drag and Drop</title>
    </head>
    <body>
        <div id="dragArea1" class="dragArea">
            <span id="d1" class="drag">123</span>
            <span id="d2" class="drag">456</span>
            <span id="d3" class="drag">789</span>
            <span id="d4" class="drag">123</span>
            <span id="d5" class="drag">456</span>
            <span id="d6" class="drag">789</span>
            <span id="d7" class="drag">123</span>
            <span id="d8" class="drag">456</span>
            <span id="d9" class="drag">789</span>
            <span id="d10" class="drag">123</span>
            <span id="d11" class="drag">456</span>
            <span id="d12" class="drag">789</span>
            <span id="d13" class="drag">123</span>
            <span id="d14" class="drag">456</span>
            <span id="d15" class="drag">789</span>
        </div>
 
        <div id="dropArea1" class="dropArea">
            <span id="d16" class="drop">321</span>
            <span id="d17" class="drop">654</span>
            <span id="d18" class="drop">987</span>
            <span id="d19" class="drop">321</span>
            <span id="d20" class="drop">654</span>
            <span id="d21" class="drop">987</span>
            <span id="d22" class="drop">321</span>
        </div>
 
 
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var dragOpts = {
                    revert: true,
                    revertDuration: 1000
                };
                $(".drag").draggable(dragOpts);           
 
                var dropOpts = {
                    accept: ".drag",
                    drop: moveSpan
                }
 
                $(".dropArea").droppable(dropOpts);
 
                function moveSpan(e, ui) {
                    ui.draggable.remove();
                    $(document.createElement("span")).addClass("drop").attr("id", ui.draggable.attr("id")).text(ui.draggable.text()).appendTo("#dropArea1");
                }
            });
 
        </script>
    </body>
</html>

In the above code, i used the jquery-ui for the drag and drop feature. but i found that after i have inserted the span to the dropArea div, the span element cannot be wrapped by the div.

actually i have posted the question in the jquery forum, but it is not yet resolved. you can refer to the following link for more information.
span position problem after being insert in div

Thanks very much for your help.

Regards,
Kit

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

A) You need a doctype. B) Why

A) You need a doctype.
B) Why should we have to go to another forum to get more information on your question. You want help? Make it easier on us, not harder.
C) Post a link.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

ykyuen
ykyuen's picture
Offline
newbie
Hong Kong
Last seen: 12 years 14 weeks ago
Hong Kong
Timezone: GMT+8
Joined: 2010-09-30
Posts: 3
Points: 4

Thank for your reply. i am

Thank for your reply.

i am sorry that i didn't put all the information about my problem.
the code i posted previously will show the following result after dragging a few span to the dropArea.
without_display_attribute.jpg

i have tried all the doctype such as HTML 4.01 Transitional and XHTML 1.0 Transitional etc. but the problem still exists.

and if i add the display:inline-block attribute to the newly inserted span element. it can be wrapped by the dropArea div.

function moveSpan(e, ui) {
	ui.draggable.remove();
	$(document.createElement("span"))
		.addClass("drop")
		.attr("id", ui.draggable.attr("id"))
		.text(ui.draggable.text())
		.css('display', 'inline-block')
		.appendTo("#dropArea1");
}

but in that case, there will be a newline in the span element as depicted in the following picture.
with_inline_block_0.jpg

Thanks again.

Kit

ykyuen
ykyuen's picture
Offline
newbie
Hong Kong
Last seen: 12 years 14 weeks ago
Hong Kong
Timezone: GMT+8
Joined: 2010-09-30
Posts: 3
Points: 4

Anyone knows what i have done

Anyone knows what i have done wrongly?
Thanks.

Regards,
Kit