如何获得'；可下拉式'；s offset（）.left和offset（）.top在不使用jquery的情况下，使用原始javascript_Javascript_Jquery_Position_Offset

如何获得'；可下拉式'；s offset（）.left和offset（）.top在不使用jquery的情况下，使用原始javascript

javascript jquery

如何获得'；可下拉式'；s offset（）.left和offset（）.top在不使用jquery的情况下，使用原始javascript,javascript,jquery,position,offset,Javascript,Jquery,Position,Offset,由于某些原因，我不能使用jquery 这是我的代码： <!DOCTYPE html> <html> <head> </head> <body > <style type="text/css"> #draggable { position: absolute; width: 100px; height: 100px;

由于某些原因，我不能使用jquery

这是我的代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body >
<style type="text/css">
#draggable
        {
            position: absolute;
            width: 100px;
            height: 100px;
            padding: 0.5em;
            float: left;
            margin: 10px;
            border: 1px solid #DDDDDD;
            color: #333333;
            background: #F2F2F2;
            cursor: move;
            z-index:10;
        }
        #droppable
        {
            width: 150px;
            height: 150px;
            padding: 0.5em;
            float: left;
            margin: 10px;
            border: 1px solid #E78F08;
            color: #FFFFFF;
            font-weight: bold;
            background: #F6A828;
            overflow: hidden;
        }
</style>
<p>
    Eos an invidunt dignissim liberavisse, no paulo alterum vix, mei causae vivendum
    te. Discere omittam ea sed. Est ex mutat aeque discere. Omnes tincidunt pro ea.
    Mentitum expetenda reprehendunt vis id, duo natum adhuc ut. Malis partiendo id duo,
    feugait iudicabit consequuntur at eum.
</p>
<div id="droppable">
    <p>
        Drop here.
    </p>
</div>
<p>
    Ea eam audire antiopam, agam consulatu patrioque no nec. Sea simul insolens ne,
    vero scribentur duo ut. Te mel dico choro virtute. Mel ex sumo omnes.
</p>


<p>
    Eos an invidunt dignissim liberavisse, no paulo alterum vix, mei causae vivendum
    te. Discere omittam ea sed. Est ex mutat aeque discere. Omnes tincidunt pro ea.
    Mentitum expetenda reprehendunt vis id, duo natum adhuc ut. Malis partiendo id duo,
    feugait iudicabit consequuntur at eum.
</p>
<p>
    Ea eam audire antiopam, agam consulatu patrioque no nec. Sea simul insolens ne,
    vero scribentur duo ut. Te mel dico choro virtute. Mel ex sumo omnes.
</p>
<div id="draggable" >
    <p>Drag me to my target</p>
</div>
<script>
function id(id){
    return document.getElementById(id)
}
console.log(id('droppable').offsetWidth,id('droppable').offsetTop)
id('draggable').style.left =id('droppable').offsetWidth+'px'
id('draggable').style.top = id('droppable').offsetTop+'px'

</script>
</body>
</html>


#拖拉的
{
位置：绝对位置；
宽度：100px；
高度：100px；
填充：0.5em；
浮动：左；
利润率：10px；
边框：1px实心#DDDDDD；
颜色：#333333；
背景#f2f2；
光标：移动；
z指数：10；
}
#可降落
{
宽度：150px；
高度：150像素；
填充：0.5em；
浮动：左；
利润率：10px；
边框：1px实心#E78F08；
颜色：#FFFFFF；
字体大小：粗体；
背景:#F6A828 ;；
溢出：隐藏；
}

他是一位不受欢迎的自由主义显贵，不是保罗·奥特伦·维克斯，而是我的事业
特朗普。讨论省略tam ea sed。这是一种变异。Omnes tincidunt pro ea。
我的经验是，两种自然疗法。Malis partiendo id duo，
在欧洲美术馆举办的一次国际展览。


在这里下车。


我是奥迪尔·安蒂奥帕姆，我是帕特里奥克咨询公司的顾问。海象，
维罗·斯文图尔·杜乌特。这是一首充满活力的合唱。我是相扑大师。


他是一位不受欢迎的自由主义显贵，不是保罗·奥特伦·维克斯，而是我的事业
特朗普。讨论省略tam ea sed。这是一种变异。Omnes tincidunt pro ea。
我的经验是，两种自然疗法。Malis partiendo id duo，
在欧洲美术馆举办的一次国际展览。


我是奥迪尔·安蒂奥帕姆，我是帕特里奥克咨询公司的顾问。海象，
维罗·斯文图尔·杜乌特。这是一首充满活力的合唱。我是相扑大师。

把我拖到我的目标
函数id（id）{
返回文档.getElementById（id）
}
console.log（id（'droppable'）.offsetWidth，id（'droppable'）.offsetTop）
id（'draggable'）.style.left=id（'dropable'）.offsetWidth+'px'
id（'draggable'）。style.top=id（'droptable'）。offsetTop+'px'

这是演示

那么，如何设置“可拖动的左侧”等于“可拖放的左侧”，顶部等于顶部

谢谢

这是mootools，不是jQuery。。。不是吗？您必须侦听诸如

mousemove

、

dragstart

和

dragstop

之类的事件-不知道没有jQuery怎么办。好吧，jQuery只是javascript，深入了解它的代码。

var bound = id('droppable').getBoundingClientRect();

var x= bound.left,y= bound.top 

id('draggable').style.left =x+'px'
id('draggable').style.top = y+'px'