如何在拖动后获取div的起始值和结束值

Question

嗨我有一个可拖动的div。我的要求是 1.在文本框中拖动后，我想要div的起始值和结束值 2.现在它只是在右侧拖动我只想从div的左侧拖动 我尝试了一些步骤，但它并不完美，因为值没有显示，从左边拖动不起作用中间表是我的父div

   $(function () {
        var container = $('.middletablediv'),
       base = null,
       handle = $('.handle'),
       isResizing = false,
   screenarea = screen.width;

        handle.on('mousedown', function (e) {
            base = $(this).closest(".scalebar");
            isResizing = true;
            lastDownX = e.clientX;
            offset = $(this).offset();
            xPos = offset.left;

        });

        $(document).on('mousemove', function (e) {
            // we don't want to do anything if we aren't resizing.
            if (!isResizing)
                return;

            p = parseInt(e.clientX - base.offset().left),
            // l = parseInt(p * (3 / 11));
            base.css('width', p);
            k = parseInt(xPos - base.offset().left);


            $("#startvalue").value(k)
            $("#stopvalue").value(p)
        }).on('mouseup', function (e) {
            // stop resizing
            isResizing = false;




        });
        });

.handle{
    position: absolute;

    top:1px;
    right: 0;
    width: 10px;
    height: 5px;
    cursor: w-resize;
    }
  .middletablediv{
   float:left;
  width:35%;
   
}
  .scalebar{
    margin-top: 13px;
    height: 7px;
    position: relative;
   width:20px;
   background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middletablediv">
    <div id="newvalue1" class="scalebar">
        <div class="handle" style="left:0"></div>  <div class="handle"></div>
    </div>
</div>
    <input id="startvalue" type="text">startvalue</input>
    <input id="stopvalue" type="text" />stopvalue</input>

我如何解决这个问题

Answer 1

您应该使用This will help you to save data in your custom table if you save table with wp prefix you can include that with table name. <?php global $wpdb; // for get user id $user_id = get_current_user_id(); $arrayinsert = array('user_id'=>$user_id,'Type_User'=>get_current_user_role()); ?> $insert_result = $wpdb->insert('my_users',$arrayinsert); if ($insert_result) { $varId = $wpdb->insert_id; } else { echo "Error:". $wpdb->last_query; } ?> 代替val()。此外，拖动工作方式的最终值可能小于起始值，所以我添加了一些东西以简单的方式处理该问题（只是切换值）。最后，要从左侧拖动，您应该以不同的方式处理左侧拖动，因此我给左侧句柄一个唯一的ID，并且还将整个父div填充一点以使其更明显。

value()

$(function () {
        var container = $('.middletablediv'),
       base = null,
       handle = $('.handle'),
       isResizing = false,
       isLeftDrag = false;
   screenarea = screen.width;

        handle.on('mousedown', function (e) {
            base = $(this).closest(".scalebar");
            isResizing = true;
          if($(this).attr('id')=='lefthandle')isLeftDrag=true;
          else isLeftDrag=false;
            lastDownX = e.clientX;
            offset = $(this).offset();
            xPos = offset.left;

        });

        $(document).on('mousemove', function (e) {
            // we don't want to do anything if we aren't resizing.
            if (!isResizing)
                return;
            if(isLeftDrag){
              
              p = parseInt(base.offset().left - e.clientX);
            k = parseInt(base.offset().left - xPos);
              
              base.css('margin-left',-p);
              base.css('width',p); 
              }
          else{
            p = parseInt(e.clientX - base.offset().left),
            // l = parseInt(p * (3 / 11));
            base.css('width', p);
            k = parseInt(xPos - base.offset().left);
            }
            //if(k>p){var temp = k; k = p; p = temp;}

            $("#startvalue").val(k)
            $("#stopvalue").val(p)
        }).on('mouseup', function (e) {
            // stop resizing
            isResizing = false;




        });
        });

.handle{
    position: absolute;

    top:1px;
    right: 0;
    width: 10px;
    height: 5px;
    cursor: w-resize;
    }
  .middletablediv{
   float:left;
  width:35%;
   
}
  .scalebar{
    margin-top: 13px;
    height: 7px;
    position: relative;
   width:20px;
   background-color: green; }