0
私はスケジューラの作成に取り組んでいます。私はinteract.jsを使ってすべてのドラッグを処理しています&要素のドロップ/スナップですが、ハードウェアセンタリングと要素をTDにスナップするようにするInteract.js tdの中心にドラッグした設定
this fiddle to see what I gotをチェックすることができます。ドラッグ可能なものを任意のセルの左上隅にドラッグすると、スナップが動作しますが、中央には表示されませんその要素、またはいつも起こることもなく、スナップが機能するための特定の位置になければならず、必ずしもセルの内側にスナップするわけではありません。いつか、ドラッグ要素はその一部をセルから取り出します。
プラグイン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;