1

フォームに 2 つの入力コントロールがあります。INPUT コントロール 1 の値を (ハンドルを介して) INPUT コントロール 2 にドラッグしたいと考えています。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.3/themes/ui-darkness/jquery-ui.css" rel="stylesheet" />
<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 () {
       $('.dragBox1').draggable({
        //scroll: true,
        containment: "wrapper",
        //axis: "x",
        cursor: "crosshair",
        //handle: "span",
        revert: false,
        helper: "clone",
        handle: "span"
       });

       $('.dragBox2').draggable({
            revert: false
       });

       $('#droppable').droppable({
            drop: function(event, ui) {
                $(this)
                .effect("shake");
                //.find("input")
                //.html("123555");
                //myinput = $(this).find("input")
                //myinput.focus();
            },
            activeClass: "ui-state-active",
            accept: function(item) {
                return $(item).hasClass('dragBox1');
            }
       });
    });
</script>
</head>
<body>
<form>
<div class="dragBox1" id="draggable3"><span id="draghere" class="ui-icon ui-icon-circle-plus">&nbsp;</span><input id="number1" type="number" value="12345" /></div>
    <br><br>
    <div id="droppable"><input id="number3" type="text"></div>
    <br><br>
    <input type="submit">
</form>
</body>
</html>
4

1 に答える 1