- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想要一个可以在屏幕上拖动并保存位置的 DIV,以便下次我返回时,DIV 位于同一个位置。
我已经通过使用 javascript/CSS 并将位置值存储到 javascript cookie 来实现功能,然后在重新加载页面时检索它(下面的代码)
我的问题是我有一个页面,内容根据 URL 中的变量加载到屏幕的不同部分
即www.example.com/example.php?date=10062016
可能有内容填充屏幕的左侧和 www.example.com/example.php?date=11062016
可能在屏幕右侧有内容。因此,如果我将 DIV 拖到屏幕的右侧,内容会覆盖在一页上,但不会覆盖另一页。
我相信我需要做的是将 cookie 名称保存为 php 变量(日期)的值,并使用作为变量的名称加载 cookie。我相信这将允许我存储多个 cookie,这些 cookie 将保存不同日期的不同位置。
我还注释掉了我认为可能在底部起作用的javascript
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
}
function drag_over(event) {
event.preventDefault();
return false;
}
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementById('dragme');
dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
var pos = {left: dm.style.left, top: dm.style.top};
document.cookie = JSON.stringify(pos);
event.preventDefault();
return false;
}
var dm = document.getElementById('dragme');
try {
var pos = JSON.parse(document.cookie);
dm.style.left = pos.left ? pos.left : '0px';
dm.style.top = pos.top ? pos.top : '0px';
} catch (e) {
// Some error handling
}
dm.addEventListener('dragstart',drag_start,false);
document.body.addEventListener('dragover',drag_over,false);
document.body.addEventListener('drop',drop,false);
/*
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementById('dragme');
dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
var pos = {left: dm.style.left, top: dm.style.top};
var str = JSON.stringify(pos);
var dat = <?php echo $_GET[date];?>;
document.cookie = dat+"="+str;
event.preventDefault();
return false;
}
var dm = document.getElementById('dragme');
try {
var pos = JSON.parse(dat);
dm.style.left = pos.left ? pos.left : '0px';
dm.style.top = pos.top ? pos.top : '0px';
} catch (e) {
// Some error handling
}
*/
aside {
position: absolute;
left: 0;
top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
width: 200px;
background: rgba(255,255,255,0.66);
border: 2px solid rgba(0,0,0,0.5);
border-radius: 4px; padding: 8px;
}
<aside draggable="true" id="dragme">
This is an aside, drag me.
</aside>
<p>I never am really satisfied that I understand anything; because, understand it well as I may, my comprehension can only be an infinitesimal fraction of all I want to understand about the many connections and relations which occur to me, how the matter in question was first thought of or arrived at, etc., etc.</p>
<p>In almost every computation a great variety of arrangements for the succession of the processes is possible, and various considerations must influence the selections amongst them for the purposes of a calculating engine. One essential object is to choose that arrangement which shall tend to reduce to a minimum the time necessary for completing the calculation.</p>
<p>Many persons who are not conversant with mathematical studies imagine that because the business of [Babbage’s Analytical Engine] is to give its results in numerical notation, the nature of its processes must consequently be arithmetical and numerical, rather than algebraical and analytical. This is an error. The engine can arrange and combine its numerical quantities exactly as if they were letters or any other general symbols; and in fact it might bring out its results in algebraical notation, were provisions made accordingly.</p>
<p>The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform. It can follow analysis, but it has no power of anticipating any analytical revelations or truths. Its province is to assist us in making available what we are already acquainted with.</p>
最佳答案
我只更改了您的 JavaScript 代码中的 2 行。我已将设置和获取 cookie 数据替换为 localStorage
方法 setItem()
和 getItem()
。
关于localStorage
保存数据多久,你可以看看@Pointy's answer here .简而言之,不清楚这些数据何时会被清除(通常它会在浏览器中保留足够长的时间),但您可以随时使用 localStorage.setItem()
和 localStorage.clearItem()
方法。
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
}
function drag_over(event) {
event.preventDefault();
return false;
}
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementById('dragme');
dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
var pos = {left: dm.style.left, top: dm.style.top};
console.log( pos );
localStorage.setItem("div_position", JSON.stringify(pos));
event.preventDefault();
return false;
}
var dm = document.getElementById('dragme');
try {
var pos = JSON.parse(localStorage.getItem("div_position"));
dm.style.left = pos.left ? pos.left : '0px';
dm.style.top = pos.top ? pos.top : '0px';
} catch (e) {
// Some error handling
}
dm.addEventListener('dragstart',drag_start,false);
document.body.addEventListener('dragover',drag_over,false);
document.body.addEventListener('drop',drop,false);
/*
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementById('dragme');
dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
var pos = {left: dm.style.left, top: dm.style.top};
var str = JSON.stringify(pos);
var dat = <?php echo $_GET[date];?>;
document.cookie = dat+"="+str;
event.preventDefault();
return false;
}
var dm = document.getElementById('dragme');
try {
var pos = JSON.parse(dat);
dm.style.left = pos.left ? pos.left : '0px';
dm.style.top = pos.top ? pos.top : '0px';
} catch (e) {
// Some error handling
}
*/
关于javascript - 设置 Javascript cookie 并检索它们,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37748365/
这个问题已经有答案了: Is there any way to accept only numeric values in a JTextField? (20 个回答) It's possible i
我使用戴尔 XPS M1710。笔记本电脑的盖子、侧面扬声器和前置扬声器都有灯(3 组灯可以单独调节)和鼠标垫下方的灯。在 BIOS 中,我可以更改这些灯的颜色,至少是每个组。另外,我可以在鼠标垫下打
我知道我可以使用 在 iOS 5 中打开设置应用 [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"prefs://"
我有一个 Django 应用程序,我正在尝试为其设置文档。目录结构如下: - doc - project | - manage.py 我已经设置了路径以便 Sphinx 可以看到东西,但是当我尝试使用
我正在使用 768mb ram 运行 centos 5.5。我一直在日志中获取 server reached MaxClients setting, consider raising the MaxC
我在具有以下配置的服务器内运行了 Drupal 安装: StartServers 5 MinSpareServers 5 MaxSpareServers 15 MaxClien
是否可以使用 Microsoft.Web.Administration 包为给定的 location 配置 asp 设置? 我想以编程方式将以下部分添加到本地 IIS applicationHost.
我一直在阅读为 kube-proxy 提供参数的文档,但没有解释应该如何使用这些参数。我使用 az aks create 创建我的集群使用 azure-cli 程序,然后我获得凭据并使用 kubect
我想知道与在 PHP 中使用 setcookie() 函数相比,在客户端通过 JavaScript 设置一些 cookie 是否有任何明显的优势?我能想到的唯一原因是减少一些网络流量(第一次)。但不是
我有一个按钮可以将 body class 设置为 .blackout 我正在使用 js-cookie设置cookie,下面的代码与我的按钮相关联。 $('#boToggle').on('click'
我有一堆自定义的 HTML div。我将其中的 3 存储在具有 slide 类的 div 中。然后,我使用该幻灯片类调用 slick 函数并应用如下设置: $('.slide').slick({
我正在创建一个应该在 Windows 8(桌面)上运行的应用 我需要: 允许用户使用我的应用启动“文件历史记录”。我需要找到打开“文件历史记录”的命令行。 我需要能够显示“文件历史记录”的当前设置。
我刚买了一台新的 MacBook Pro,并尝试在系统中设置 RVM。我安装了 RVM 并将默认设置为 ➜ rvm list default Default Ruby (for new shells)
由于有关 Firestore 中时间戳行为即将发生变化的警告,我正在尝试更改我的应用的初始化代码。 The behavior for Date objects stored in Firestore
在 ICS 中,网络 -> 数据使用设置屏幕中现在有“限制后台数据”设置。 有没有办法以编程方式为我的应用程序设置“限制后台数据”? 或 有没有办法为我的应用程序调出具有选项的“数据使用”设置? 最佳
我正在尝试使用 NextJS 应用程序设置 Jest,目前在 jest.config.js : module.exports = { testPathIgnorePatterns: ["/.n
我最近升级到 FlashDevelop 4,这当然已经将我之前的所有设置恢复到原来的状态。 我遇到的问题是我无法在新设置窗口的哪个位置找到关闭它在方括号、大括号等之前插入的自动空格的选项。 即它会自动
有没有办法以编程方式访问 iPhone/iPod touch 设置? 谢谢。比兰奇 最佳答案 大多数用户设置可以通过读取存储在 /User/Library/Preferences/ 中的属性列表来访问
删除某些值时,我需要选择哪些设置来维护有序队列。我创建了带有自动增量和主键的 id 的表。当我第一次插入值时,没问题。就像 1,2,3,4,5... 当删除某些值时,顺序会发生变化,例如 1,5,3.
我正在尝试设置示例 Symfony2 项目,如此处所示 http://symfony.com/doc/current/quick_tour/the_big_picture.html 在访问 confi
我是一名优秀的程序员,十分优秀!