我的拖放无效

Question

i want move my #timebase1 div into draghere div. now its move only the start of the div, i want to drop it in anywhere inside the 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

You must allowdrop on your target div like this :

 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> 

EDIT

One example with jquery-ui :

https://jsfiddle.net/2gaq2r15/

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