当前位置： 文江博客话题详情

如何获得“可放置” s offset().left 和 offset().top 不使用 jquery，使用原始 javascript

发布于 2024-09-26 03:20:50 字数 2518 浏览 5 评论 0原文

由于某种原因，我无法使用 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>

这是演示 http://jsfiddle.net/6H5Yj/

那么如何设置'draggable's left 等于'droppable's left, top 等于顶部，

谢谢

原文

for some reason , i can't use jquery .

this is my code:

<!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>

this is the demo http://jsfiddle.net/6H5Yj/

so how to set the 'draggable's left Equal the 'droppable's left, top Equal top,

thanks

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

寂寞笑我太脆弱 2024-10-03 03:20:50
var bound = id('droppable').getBoundingClientRect();

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

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

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

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

id('draggable').style.left =x+'px'
id('draggable').style.top = y+'px'
回复 原文
~没有更多了~

关于作者

长安忆

暂无简介

文章
评论
520 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

三岁铭

文章 0 评论 0

alipaysp_VP2a8Q4rgx

文章 0 评论 0

拧巴小姐

文章 0 评论 0

1649543945

文章 0 评论 0

深居我梦

文章 0 评论 0

tongsw

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文