个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我正在使用 html5 + css3 + javascript 制作 gui 应用程序。我正在尝试模拟一个结构，其中一个寡妇被分成两个部分，中间有一个可移动的 Pane 。当用户拖动 Pane 时， Pane 应该跟随鼠标光标，改变两侧两个部分的大小。到目前为止，我想出了以下代码。
<html>
<head>
<style>
.container {
display : inline-block;
height : 500px;
}
.pane {
display : inline-block;
width : 10px;
height : 100%;
vertical-align : top;
color : #806000;
background-color : #b0d0c0;
}
.resbox {
display : inline-block;
width : 200px;
height : 100%;
background-color : #707070;
}
</style>
<script async="true">
function dragStart(e, left, right){
mousedown = true;
x = e.clientX
dragOffsetLeft = document.getElementById(left).offsetWidth - x;
dragOffsetRight = document.getElementById(right).offsetWidth + x;
};
function dragRelease(){
mousedown = false;
};
function drag(e, left, right){
if(!mousedown){return}
x = e.clientX
tmpLeft = dragOffsetLeft + x
tmpRight = dragOffsetRight - x
if(tmpLeft < 30 || tmpRight < 30){return}
document.getElementById(left).style.width = tmpLeft + 'px';
document.getElementById(right).style.width = tmpRight + 'px';
};
</script>
</head>
<body>
<span class="container">
<span id="left" class="resbox">Left</span>
<span class="pane" onmousedown="dragStart(event, 'left', 'right');" onmousemove="drag(event, 'left', 'right');" onmouseout="dragRelease();" onmouseup="dragRelease();"></span>
<span id="right" class="resbox">Right</span>
</span>
</body>
</html>
它有时有效，但其他时候(尤其是在我完成一次 Pane 拖动之后)，中间的 Pane 像图片一样拖出位置，并且预期的功能被阻止。我在 <script>...</script> 中添加了以下内容, 但它没有帮助。
window.onload = function(){
document.getElementsByClassName('pane')[0].draggable = false;
};
我可以就如何禁用默认拖动提出建议吗？我使用的是 firefox 7.0.1 和 chrome 15.0.874.106。这段代码还有什么其他的改进点可以让运动更平稳流畅吗？
最佳答案
首先，要在拖动分隔线时停止突出显示文本:
onmousedown="dragStart(event, 'left', 'right'); return false;"
// Returning false stops the default dragging
当光标移动太快时，这仍然不起作用。这是因为分隔线太细，光标快速移动会退出。
我在这里做了一个快速的解决方法:http://jsfiddle.net/np56t/1/
我建议尝试使用 jQuery UI Draggable正确地做到这一点。
关于javascript - 模拟可移动分隔线 : Need to disable default dragging，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8060674/
29
4
0
我正在尝试使Polymer Dart元素可拖动，并与列表中的另一个项目交换信息。我最近的尝试是使用元素。我正在使用由trackstart，track和trackend的此元素创建的事件。我可以触发它们
我正在使用 Windows 窗体在 C# 中构建桌面应用程序。我有一个自定义控件，我希望能够将它拖放到我的应用程序中(而不是外部)。现在我正在使用通常的 DoDragDrop/OnDragOver/O
我有一个#topleft红色标题栏，其中包含多个“选项卡”按钮，这些按钮应填充除#topright蓝色块之外的所有可用空间。 在#topleft的红色背景上单击并拖动，可以移动 Electron 主窗
我希望能够移动(在灰色背景上，通过拖放)Bootstrap 2 提供的模态表单。谁能告诉我实现此目的的最佳实践是什么？ 最佳答案 默认情况下， Bootstrap 不附带任何拖放功能，但您可以添加一些
我只想在屏幕上拖动小部件，而不是拖放。 但是，每当我离开它并再次开始拖动时，它就会从开始的位置开始被拖动。就好像它被重置了。 我的猜测是构建被一次又一次地调用，所以它自动使用原始位置值。我该如何解决？
我只想在屏幕上拖动小部件，而不是拖放。 但是，每当我离开它并再次开始拖动时，它就会从开始的位置开始被拖动。就好像它被重置了。 我的猜测是构建被一次又一次地调用，所以它自动使用原始位置值。我该如何解决？
我试图在拖放过程中更改节点上的光标，但图像没有改变。我打电话 setCursor()在 DragDetectedEventHandler我的节点。我也试过调用 getParent().setCurso
这个问题已经有答案了: D3.js: Remove force.drag from a selection (3 个回答) 已关闭 7 年前。 我将以下内容附加到 svg 元素 var dragger
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
使用 jsTree 3.0.8 我想允许在树中拖放节点，但它应该只允许通过拖动特定按钮或“拖动 handle ”而不是默认的操作来启动该操作允许拖动行上任意位置的行为。 我通过 Html 填充我的树，
当元素开始被拖动时，我需要修改它。 “开始”回调有两个参数，只有第一个参数对我有用。交易是我正在使用 helper: 'clone' 这使得 event.originalTarget 仅指向“原始”元
我有一个可拖动的 img 元素。现在我想手动触发 drag() 事件，就像我们如何触发 'click' 事件一样 $(element).trigger('click')。谢谢。 这是我的函数定义 $(
这是我的 jsfiddle 代码: http://jsfiddle.net/SMqR9/16/ 您会注意到，在 IE7 中，当您向上拖动一个元素时，它在放置之前一直可见。但是，如果您向下拖动一个元素，
我是 knockout JavaScript 的新手。在我的元素中，我使用了 Knockout 拖放功能。最初我有两个部门，一个是可见的，另一个没有属性显示。当我执行拖动输入功能时，我需要隐藏第一个分
上下文:如下面jsp内输入框中的代码所示，要拖放“fruitTree”中的水果节点。 这在拖放时成功发生。每次我从fruitTree中拖放水果时，先前拖放的水果节点都会被新拖放的水果覆盖。 问题:现在
我想移动一定距离。但是，在我的系统中，存在惯性/拖动/负加速度。我正在使用这样的简单计算： v = oldV + ((targetV - oldV) * inertia) 将其应用于多个帧会使运动“上
我正在使用 Kendo Grid UI。下面是一个相同的例子。 Grid / Column resizing
我有这个页面，我只能在浏览器中访问。有一个HTML元素仅在拖放过程中存在，并且我想在Inspector / Firebug中获取/分析其HTML代码。但是一旦我停止拖动，该元素就会被删除。 有什么方法
这真杀了我。我不小心将文件拖到其他位置时遇到问题。与其他编辑器相比，在vscode中，我似乎更经常为此受害。是否有任何插件，设置或其他使我无法使用鼠标技能的东西？ 最佳答案 我有同样的问题。当文件夹意
//The following game has been designed as an educational resource //for Key Stage 1 and 2 children.
我是一名优秀的程序员,十分优秀！