Mein Drag & Drop funktioniert nicht

Question

Ich möchte mein # timebase1 div in drifher div verschieben. jetzt ist es nur der Anfang des div, ich möchte es überall in dragehere div einfügen.

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

Sie müssen auf dem Ziel div wie diese AllowDrop:

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

Ein Beispiel mit jquery-ui:

https://jsfiddle.net/2gaq2r15/

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