1

我在表单上有 2 个输入控件。我想（通过句柄）将 INPUT 控件 1 中的值拖动到 INPUT 控件 2。到目前为止我有此代码，但我无法让该值出现在目标 INPUT 控件中。

<!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

0

您可以使用val,find和ui.helper找到内部输入 o 并获取其值并设置删除的输入。

代码：

 $(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");

                var myinput = $(this).find("input").val($(ui.helper).find("input").val())
                myinput.focus();
            },
            activeClass: "ui-state-active",
            accept: function(item) {
                return $(item).hasClass('dragBox1');
            }
       });
    });

演示：http: //jsfiddle.net/3XsMu/

于 2013-09-22T19:01:01.737 回答