交互.js设置拖到td的中心
Interact.js Setting dragged on center of td
我正在创建一个调度器，我正在使用interact.js来处理所有的拖动&元素的下落/捕捉，但我正在进行硬居中，并使元素捕捉到TD
你可以检查这个小提琴来看看我得到了什么，如果你把可拖动的拖到任何单元格的左上角，你会看到捕捉有点作用，但它不会使元素居中，也不会总是发生，它必须在特定的位置上才能使捕捉起作用，而不是总是将其捕捉到单元格的内部，有时，拖动元素会将部分捕捉到单元格之外。
我已经在插件github上回顾了Snap的例子，它让我了解了如何实现我想要的目标。网格系统对我来说不起作用，因为该项目需要一个空的列作为某种空白。
任何帮助都将不胜感激。
单元格上方的十字架是捕捉的地方，我的意思是，这是锚的位置，不完美，我仍在努力使它们居中
这是代码
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的快照功能，无论是使用snapgrid还是锚
相关文章：
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 如何通过js更改td的属性
- Knockout.js和表:插入<th>将内容转换为匹配<td>
- 使用js:order<创建表时出现问题;tr>并且<td>
- DataTables, Ember.js and Views inside a <td>
- 如何使用JS或JQuery使工具提示显示在TD悬停上
- 如何在 js 中编辑和更新表中的 td
- 无法在 JS 生成的表中设置 TD 宽度
- 如何在TD上应用CSS，其中每列的CSS类在Angular JS中是分开的
- 使用外部js文件引用td标记
- 使用cheerio js和node js抓取td元素的HTML
- 如何用纯JS瞄准每一行的第一个td
- 使用js或jQuery计算td类的和
- 我如何使用js添加一个按钮到td
- 使用JQuery/JS存储<td>单击(）
- 交互.js设置拖到td的中心
- Knockout JS:如何动态更新<td>计数等于<th>计数
- 抓取<TD>并使用jQuery/JS对其进行相应的乘/除
