1 
 <!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    #divdrag1{float:left; width:154px; height:200px; margin:20px;padding:2px;border:1px solid #aaaaaa;}
    #div2,#div3{float:left; width:200px; height:195px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script language="javascript" src="../JS/jQuery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    function allowDrop(ev)
    {
        ev.preventDefault();
    }
    function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    var n;

    function drop(ev)
    {
        var len=$("#div2 img").length;
        alert(len);
        if(len > 0)
        {

            $(document).ready(function() {
                var $dialog = $('<div></div>')
                    .html("This is the <i>content</i> of the dialog box.")
                    .dialog({
                        autoOpen: false,
                        title: "Title of the dialog box",
                        // add any additional jQuery Dialog options
                        modal: true
                    });
                $("body").delegate("#div2", "click", function() {
                    $dialog.dialog('open');
                    return false;    
                });
            });
        }
        else
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data).cloneNode(true)); 
        }
    }
</script>
</head>

私のhtmlコード

<body>
    <form id="f1" name="form1" method="post">
        <div id="divdrag1" ondragover="allowDrop(event)" >
            <ul type="none">
                <li><img src="smiley.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31" align="left"> </li>
                <li><img src="pic1.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31"> </li>
            </ul>
        </div>
        <div>
            <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <input type="button" value="Clear" >
    </form>
</body>
</html>

これでは、「バインド」の代わりにどの機能を使用する必要があるかわかりません。ボタンをクリックして使用すると、機能します。しかし、 bind に変更すると、上記のコードは機能しません。divタグの書き方を教えてください..助けてください友達...

4

4 に答える 4