当我将div放在droppable区域时,如何获取输入文本值(来自数据库)?

时间:2018-04-03 05:31:16

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

我使用数据库制作了可拖动的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中)。

我引用并编写代码。我通过警告消息测试,它显示为空白。

1 个答案:

答案 0 :(得分:0)

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

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

由此:

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

因为typeid$('.popup')而非droppedElement的孩子。