當我將div放在可放置區域時，如何獲取輸入文本值（從數據庫）？

Question

我通過使用數據庫制作了可拖動的div。 我想在drophandler事件中獲取輸入類型的值。 但它顯示為空白。

我的JavaScript

  $ (init);
    function init() {
        $(".drag").draggable({
            start: handleDragStart,
            cursor: 'move',
            revert: "invalid",
        });
        $("#drop").droppable({
            drop: handleDropEvent,
            tolerance: "touch",              
        });

    }
    function handleDragStart (event, ui) {
        $(this).css('z-index', 9999);
    }       
    function handleDropEvent (event, ui) {

        $(this).append(ui.draggable);
        var droppedElement = ui.draggable;

          var popUp = droppedElement.find('#btnAddtujuan');
           popUp.on('click', function(event) {
            $("#registerDiv").fadeIn(1000);
            $("#popup").fadeIn(100);
             event.preventDefault();
        });

       var typeidsetresult  = droppedElement.find('#typeid');
        var choice = typeidsetresult.html();
      alert(choice);        
             $('#typeidset').val(choice);

    }

這是我的代碼：

<div class="col-md-3" id="right" style="margin-top: -1.5%;">

                   <?php        $conn = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_DATABASE);


                            $sample = " select * from definetype ";
                                     $resultsample = $conn->query($sample);

                                          if($resultsample->num_rows >0)
                                        {
                                            echo '<div class="row">';
                                            while($rowresultsample = $resultsample->fetch_assoc())
                                            {         

                                              $type = $rowresultsample['type'];

                                   ?>
                                   <div class="drag" >
                                   <div id="btnAddtujuan">
                                   <img src="<?php echo $rowresultsample['img'];?>" id="imagetargettype" />
                                   <input  style="color:black;background-color:white;" name="typeid" id="typeid" value="<?php  echo $type;?>" />
                     </div></div>

        <?php } }?>
            <div id="popup">
                  <div id="popupinfo">
                    <div id="registerDiv">
                      <form style="background-color: white;" id="targetinsert1">
                  <input type="text"  value="" id="typeidset" disabled="disabled"/>
                 </form>
                    </div>
                  </div>
                </div>   
         <div id="drop" class="ui-widget-header" style="width: 100%;height:100%;">  <img style="padding-top:5%;" src="<?php echo $rowquerycat2[KEY_TARGETIMAGENAME]; ?>" id="target" alt="" class="img-responsive" /></div>

我想獲取輸入文本值<input style="color:black;background-color:white;" name="typeid" id="typeid" value="<?php echo $type;?>" /> <input style="color:black;background-color:white;" name="typeid" id="typeid" value="<?php echo $type;?>" />並將值傳遞給<input type="text" value="" id="typeidset" disabled="disabled"/> （在彈出div中）當我放下div時。

我引用並編寫代碼。 我通過警報消息進行了測試，它顯示為空白。

Answer 1

您選擇typeid代碼不正確。 您需要以下更改代碼：

var typeidsetresult  = droppedElement.find('#typeid');

這樣：

var typeidsetresult  = $('.popup').find('#typeid');

因為typeid是$('.popup') droppedElement而不是droppedElement 。