个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
29
4
我正在努力创建一些调度程序，我正在使用 interact.js 来处理元素的所有拖放/捕捉，但我很难居中并使 elemento 捕捉到 TD
可以查看this fiddle to see what I got , 如果你将 draggable 拖动到任何单元格的左上角，你会看到 snap 有点工作，但它不会使元素居中，也不会总是发生，它必须位于特定位置snap 起作用，但并不总是将其吸附到单元格内部，有时，拖动元素会将其部分移出单元格。
我已经在插件 github 上查看了 Snap 示例，它让我了解了如何实现我正在寻找的东西。网格系统对我不起作用，因为该元素需要一个空列作为某种空白。
任何帮助将不胜感激。
单元格上方的十字是捕捉的位置，我的意思是，这是 anchor 的位置，并不完美，我仍在努力使它们居中
这是代码
var element = document.getElementById("schedule");
var anchors = [];
document.querySelectorAll(".dropzone").forEach(function (td, i) {
var boundRect = td.getBoundingClientRect();
var anchor = {
x: boundRect.left + 30,
y: boundRect.top + 15,
range: 20
}
anchors.push(anchor);
});
anchors.forEach(function(anchor, i){
var textNode = document.createElement("div");
textNode.appendChild(document.createTextNode("+"));
textNode.style.position = "absolute";
textNode.style.top = anchor.y + "px";
textNode.style.left = anchor.x + "px";
textNode.style.zIndex = 100;
textNode.style.fontWeight = "bolder";
document.querySelector("#wrapper").appendChild(textNode);
});
// target elements with the "draggable" class
interact('.draggable')
.draggable({
// enable inertial throwing
inertia: true,
// snapping to grid
snap: {
targets: anchors,
enabled: true,
endOnly: true,
//offset: 'startCoords'
},
// keep the element within the area of it's parent
restrict: {
drag: element,
endOnly: false,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
// call this function on every dragend event
onend: function (event) {
}
});
// enable draggables to be dropped into this
interact('.dropzone').dropzone({
// only accept elements matching this CSS selector
accept: '#dragabble',
// Require a 75% element overlap for a drop to be possible
overlap: 0.6,
// listen for drop related events:
ondropactivate: function (event) {
// add active dropzone feedback
event.target.classList.add('drop-active');
},
ondragenter: function (event) {
var draggableElement = event.relatedTarget,
dropzoneElement = event.target;
// feedback the possibility of a drop
dropzoneElement.classList.add('drop-target');
draggableElement.classList.add('can-drop');
draggableElement.textContent = 'Dragged in';
var dropRect = interact.getElementRect(event.target),
dropCenter = {
x: dropRect.left + 30,
y: dropRect.top + 15
};
event.draggable.snap({
anchors: dropCenter
});
},
ondragleave: function (event) {
// remove the drop feedback style
event.target.classList.remove('drop-target');
event.relatedTarget.classList.remove('can-drop');
event.relatedTarget.textContent = 'Dragged out';
event.draggable.snap(false);
},
ondrop: function (event) {
event.relatedTarget.textContent = 'Dropped';
},
ondropdeactivate: function (event) {
// remove active dropzone feedback
event.target.classList.remove('drop-active');
event.target.classList.remove('drop-target');
}
});
function dragMoveListener(event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
最佳答案
好吧，没关系，我决定按照我想要/需要的方式实现我自己的捕捉。
我刚刚在 ondrop 事件中添加了一些代码，以将 dragabble 设置到它着陆的 td 的中心，并制作了我需要的快照
var element = document.getElementById("schedule");
// target elements with the "draggable" class
interact('.draggable')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
drag: element,
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
// call this function on every dragend event
onend: function (event) {
}
});
// enable draggables to be dropped into this
interact('.dropzone').dropzone({
// only accept elements matching this CSS selector
accept: '#dragabble',
// Require a 75% element overlap for a drop to be possible
overlap: 0.6,
// listen for drop related events:
ondropactivate: function (event) {
// add active dropzone feedback
event.target.classList.add('drop-active');
},
ondragenter: function (event) {
var draggableElement = event.relatedTarget,
dropzoneElement = event.target;
// feedback the possibility of a drop
dropzoneElement.classList.add('drop-target');
draggableElement.classList.add('can-drop');
draggableElement.textContent = 'Dragged in';
},
ondragleave: function (event) {
// remove the drop feedback style
event.target.classList.remove('drop-target');
event.relatedTarget.classList.remove('can-drop');
event.relatedTarget.textContent = 'Dragged out';
},
ondrop: function (event) {
var draggableElement = event.relatedTarget,
dropzoneElement = event.target,
dropRect = getOffset(dropzoneElement),
x = dropRect.left,
y = dropRect.top;
draggableElement.textContent = 'Dropped';
// translate the element
draggableElement.style.webkitTransform =
draggableElement.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
draggableElement.setAttribute('data-x', x);
draggableElement.setAttribute('data-y', y);
event.relatedTarget.textContent = 'Dropped';
},
ondropdeactivate: function (event) {
// remove active dropzone feedback
event.target.classList.remove('drop-active');
event.target.classList.remove('drop-target');
}
});
function dragMoveListener(event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
function getOffset(el) {
el = el.getBoundingClientRect();
return {
left: el.left + window.scrollX,
top: el.top + window.scrollY
}
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener; td
{
width: 68px;
height: 32px;
}
#wrapper
{
width: 100%;
height: 100%;
}
#dropZone {
height: 140px;
background-color: Gray;
}
.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
/*margin: 10px auto 30px;*/
padding: 6px;
/*width: 80%;*/
transition: background-color 0.3s;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}
.drag-drop {
display: inline-block;
width: 60px;
height: 30px;
/*padding: 2em 0.5em;*/
color: #fff;
background-color: #29e;
border: solid 2px #fff;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition: background-color 0.3s;
}
.drag-drop.can-drop {
color: #000;
background-color: #4e4;
}
#draggable::before {
content: "#" attr(id);
font-weight: bold;
}<script src="http://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
<div id="wrapper">
<div id="dragabble" class="draggable drag-drop">
#yes-drop
</div>
<!--<div id="dropZone" class="dropzone"></div>-->
<table id="schedule" width="100%">
<thead>
<tr>
<th></th>
<th>Ven1</th>
<th>Ven2</th>
<th>Ven3</th>
<th>Ven4</th>
<th>Ven5</th>
<th>N.Crane</th>
<th>S.Crane</th>
<th>TrainWell 1</th>
<th>TrainWell 2</th>
<th>InbShip</th>
<th>InbCoat</th>
<th>InbTrain</th>
</tr>
</thead>
<tbody>
<tr>
<td>0/0[2]</td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
</tr>
<tr>
<td>0/6[3]</td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
</tr>
<tr>
<td>0/6[2]</td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
</tr>
<tr>
<td>0/6[4]</td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
<td class="dropzone"></td>
</tr>
</tbody>
</table>
</div>无论如何，如果有人有建议或知道如何使用 interact.js 的 snap 功能使其工作，将不胜感激，无论是使用 snapgrid 还是 anchor
关于javascript - Interact.js 设置拖到 td 中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38796836/
29
4
0
我刚刚将我的 Ember 插件从 3.0 版升级到了 3.8 版，现在我收到了这个警告: Interaction added to non-interactive element no-invalid
我正在尝试使用git add --interactive有选择地向我的索引添加一些更改，但我不断收到“您编辑的大块不适用。再次编辑...”消息。即使我选择 e 选项，我也会收到此消息，并立即保存/关闭
我正在尝试将 SelectedDateChanged 绑定(bind)到一个命令，这样我就可以将它放在我的 ViewModel 中，但无论如何它都不会接受此代码 http://pastebin.com
有时我的应用程序 UI 中有两个共享按钮(取决于状态)。它们可以共享相同的数据，但位于 UI 的不同部分。我们想要分析从哪个按钮(UI 的一部分)执行了共享。我希望使用 fieldsObject这部分
我发现了一些这样的代码， 1 (require 'cl-lib) 2 (require 'company) 3 4 (defun company-sample-backend (command
背景 gbm 包 的引用手册指出，interact.gbm 函数计算 Friedman 的 H 统计量以评估变量相互作用的强度。 H 统计量的范围为 [0-1]。 dismo 包的引用手册没有引用任何
免责声明:我知道它不是有效的 HTML。我想了解为什么不允许这样做？ W3C 建议使用像 button 这样的交互元素。或 a不得包含其他交互元素。 我可以找到很多提到这条规则和一些变通办法的资源，还
在我的网络应用程序中， map 最初设置为非交互式(用户无法在 map 上移动): var map = new mapboxgl.Map({ container: 'map', sty
我正在尝试设置它，以便当我使用 applescript 打开我的插画文件时没有用户交互，但标准是: tell application id "com.adobe.Illustrator" activa
我已经在几个项目中使用了 System.Windows.Interactivity DLL，没有任何问题。现在在我最新的项目中我无法让它工作。我总是收到以下错误: 命名空间“http://schema
Presto 网站(和其他文档)讨论了 Presto 上的“交互式查询”。什么是“交互式查询”？来自 Presto 网站:“Facebook 使用 Presto 对多个内部数据存储进行交互式查询，包括
当我尝试执行 mvn release: Perform 时，出现此错误 [ERROR] Provider message: [ERROR] The svn command failed. [ERROR
我正在尝试使用 C# Interactive 尝试一些 mongodb 驱动程序，但是一旦我尝试创建一个 MongoClient我收到以下异常: > var client = new MongoCli
我想使用IB Api，但无法弄清楚我们如何请求完整的符号列表和信息。 在我找到的文档中:reqScannerParameters()-但不清楚如何获取例如纳斯达克股票的 list ？ 有没有更好的办法
我已经开始将 IB 与 IBridgePy 结合使用，我想知道是否有可能以某种方式执行任何回溯测试，有没有人如何做到这一点？ 最佳答案 IB 没有现成的回测/重放工具。基本上，您必须下载历史数据并通过
我是否编译 Racket 程序似乎对运行时性能没有影响。 通过编译改进的只是最初加载文件吗？换句话说，是否正在运行 racket src.rkt即时进行 jit 编译，这就是为什么我认为编译与交互式没
在解决一些练习时，我发现了 2 个重复出现的 IO 模式。第一个模式已经被方便的interact覆盖了。第二种模式类似，但按行处理输入。 如何编写 interactLinewise 方法？ 最佳答案
我正在尝试使用来自 Fsi 的 F# 程序集，但似乎无法找到一种方法来获取模块中定义的方法列表以便调用它们。 这是我尝试使用的示例文件。在关注 "exposing methods that are c
我正在开发一个基本的 Haskell 程序，其中包含这行代码: interact (unwords . (map pigLatin . words) ) 但是，在将字符串数组传递给我的 pigLati
我不确定我的措辞是否正确。当一个元素被放入放置区时，我需要知道该元素相对于它所在的放置区的 x/y 位置。 非常感谢任何见解。谢谢! 最佳答案 这绝对应该由图书馆提供，但既然不是，我就是这样完成的:
我是一名优秀的程序员,十分优秀！