Question

如何将可拖动div的值与click按钮事件上的droppable输入进行比较。当draggable div拖到droppable div时，我需要比较draggable div的值和droppable div onclick按钮事件。

<script>
    $(function() {
        $(".mover").draggable();
        $('.place').droppable({
            drop: Drop
        });
    });

    function Drop(event, ui) {
        var draggableId = ui.draggable.attr("id");
        var droppableId = $(this).attr("id");
        $('.place').removeClass(draggableId);
        $('#' + droppableId).addClass(draggableId);
    }

    function GetResult() {
        if ($('#draggable').attr('data-value') == $(".draggable").attr('data-value')) {
            alert("value match");
        } else {
            alert("value not match");
        }
    }
</script>
<body>
    <div class="wrapper">
        <div class="container-word">
             <h1 class="main-title">Drag n Drop</h1>

            <div class="left-word">
                 <h1>Words</h1>

                <p> 
                    <span id="draggable" class="ui-widget-content mover" data-value="1">Word1</span>
                </p>
                <p> 
                    <span id="draggable1" class="ui-widget-content mover">Word2</span>
                </p>
                <p> 
                    <span id="draggable2" class="ui-widget-content mover">Word3</span>
                </p>
                <p> 
                    <span id="draggable3" class="ui-widget-content mover">Word4</span>
                </p>
                <p> 
                    <span id="draggable4" class="ui-widget-content mover">Word5</span>
                </p>
                <p> 
                    <span id="draggable5" class="ui-widget-content mover">Word6</span>
                </p>
                <p> 
                    <span id="draggable6" class="ui-widget-content mover">Word7</span>
                </p>
                <p> 
                    <span id="draggable7" class="ui-widget-content mover">Word8</span>
                </p>
                <p> 
                    <span id="draggable8" class="ui-widget-content mover">Word9</span>
                </p>
                <p> 
                    <span id="draggable9" class="ui-widget-content mover">Word10</span>
                </p>
                <p> 
                    <span id="draggable10" class="ui-widget-content mover">Word11</span>
                </p>
            </div>
            <div class="right-side">
                <div class="row">
                    <h3>Category 1</h3>

                    <div class="inputs">
                        <input type="text" value="" id="droppable" class="ui-widget-header place ipt1" data-value="1">
                        <input type="text" value="" id="droppable1" class="ui-widget-header place">
                        <input type="text" value="" id="droppable2" class="ui-widget-header place">
                    </div>
                </div>
                <div class="row">
                    <h3>Category 2</h3>

                    <div class="inputs">
                        <input type="text" value="" id="droppable3" class="ui-widget-header place">
                        <input type="text" value="" id="droppable4" class="ui-widget-header place">
                    </div>
                </div>
                <div class="row">
                    <h3>Category 3</h3>

                    <div class="inputs">
                        <input type="text" value="" id="droppable5" class="ui-widget-header place">
                        <input type="text" value="" id="droppable6" class="ui-widget-header place">
                        <input type="text" value="" id="droppable7" class="ui-widget-header place">
                    </div>
                </div>
                <div class="row">
                    <h3>Category 4</h3>

                    <div class="inputs">
                        <input type="text" value="" id="droppable8" class="ui-widget-header place">
                        <input type="text" value="" id="droppable9" class="ui-widget-header place">
                    </div>
                </div>
                <div class="row">
                    <h3>Category 5</h3>

                    <div class="inputs">
                        <input type="text" value="" id="droppable10" class="ui-widget-header place">
                    </div>
                </div>
                <input type="button" value="Check" onClick="GetResult()">
            </div>
        </div>
    </div>
</body>

Answer 1

是否可以在处理droppable事件时获取targetDiv的attr？试试

function Drop(event, ui) {
    console.info($(event.target).attr("data-value"));
    console.info(ui.draggable.attr("data-value"));

}

将draggable div的值与droppable输入onclick事件进行比较

1 个答案: