当我将 div 放在可放置区域上时，如何获取输入文本值（来自数据库）？答案

【问题标题】：How to get the input text value (from database) when I drop the div on droppable area?当我将 div 放在可放置区域上时，如何获取输入文本值（来自数据库）？
【发布时间】：2018-04-03 05:31:16
【问题描述】：

我使用数据库制作了可拖动的 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;?>" /> 的值，并在删除 div 时将该值传递给<input type="text" value="" id="typeidset" disabled="disabled"/>（在弹出 div 中）。

我参考和编码一些东西。我通过警报消息测试，它显示为空白。

【问题讨论】：

标签： javascript jquery jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

您选择typeid 的代码不正确。您需要更改以下代码：

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

通过这个：

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

因为typeid 是$('.popup') 的孩子，而不是droppedElement。

【讨论】：