我的拖累掉线不起作用

Question

我希望将我的＃timebase1 div移动到draghere div中。现在它只移动div的开头，我想把它放在dragehere div里面的任何地方。

 function funct(e) {

            var id = e.id;
            mouseXY(id);
        }

        function mouseXY(id) {

            //alert(id);
            var x = event.pageX,
              y = event.pageY
            $('#' + id).css({
                top: y,
                left: x + ''
            });
        }        

.activelevel1 {
    background-color: #EA623E;
}
.timescalebase {
    margin-top: 13px;
    height: 7px;
    position: relative;
    width:0px;
    }

  <div id="draghere"style="width:100%;margin-top:25px;">
                <div id="timebase1"draggable="true"class="timescalebase activelevel1" ondrag=funct(this)>
                    
                </div>

Answer 1

你必须像这样允许你的目标div：

function funct(e) {

  var id = e.id;
  mouseXY(id);
}

function allowDrop(ev) {
  ev.preventDefault();
}

function mouseXY(id) {
  var x = event.pageX,
    y = event.pageY
  $('#' + id).css({
    left: x
  });
}

.activelevel1 {
  background-color: red;
  width: 10px;
  height: 10px;
}
.timescalebase {
  margin-top: 13px;
  height: 7px;
  position: relative;
}
#draghere {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="draghere" style="width:100%;margin-top:25px;" ondragover="allowDrop(event)">
  <div id="timebase1" draggable="true" class="timescalebase activelevel1" ondrag="javascript:funct(this)">

  </div>
</div>

修改

jquery-ui的一个例子：

https://jsfiddle.net/2gaq2r15/

$(document).ready(function(e) {
  $("#timebase1").draggable({
    containment: "#draghere",
    axis: "x"
  });
});