使用interact.js拖放功能
[英]Drag and drop functionality using interact.js
問題描述
我已經嘗試像示例本身一樣運行interact.js拖放方法。 我下載了interact.js和interact.min.js，並將它們也包含在我的html文件中。 但是該功能似乎未實現。 在這方面的任何建議將不勝感激。 我在下面的上下文中為代碼提供了jsFiddle
/** * Created by nayantara on 8/3/16. */ /* The dragging code for '.draggable' from the demo above * applies to this demo as well so it doesn't have to be repeated. */ // enable draggables to be dropped into this interact('.dropzone').dropzone({ // only accept elements matching this CSS selector accept: '#yes-drop', // Require a 75% element overlap for a drop to be possible overlap: 0.75, // 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) { event.relatedTarget.textContent = 'Dropped'; }, ondropdeactivate: function(event) { // remove active dropzone feedback event.target.classList.remove('drop-active'); event.target.classList.remove('drop-target'); } });
#outer-dropzone { height: 140px; } #inner-dropzone { height: 80px; } .dropzone { background-color: #ccc; border: dashed 4px transparent; border-radius: 4px; margin: 10px auto 30px; padding: 10px; 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; min-width: 40px; 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; } JS Demo only
<html> <head> <script src="http://code.interactjs.io/v1.2.6/interact.js"></script> <script src="http://code.interactjs.io/v1.2.6/interact.min.js"></script> </head> <body> <div id="no-drop" class="draggable drag-drop">#no-drop</div> <div id="yes-drop" class="draggable drag-drop">#yes-drop</div> <div id="outer-dropzone" class="dropzone"> #outer-dropzone <div id="inner-dropzone" class="dropzone">#inner-dropzone</div> </div> </body> </html>
2 個解決方案
解決方案1
2 2016-08-03 09:57:30
您發布的JS僅是用於dropzone處理的代碼，您還需要在鏈接頁面上的第一個示例中添加片段，以便進行拖動。
解決方案2
2 已采納 2016-08-03 10:43:43
剛想到發布工作版本
// 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: { restriction: "parent", 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) { var textEl = event.target.querySelector('p'); textEl && (textEl.textContent = 'moved a distance of ' + (Math.sqrt(event.dx * event.dx + event.dy * event.dy)|0) + 'px'); } }); 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; // enable draggables to be dropped into this interact('.dropzone').dropzone({ // only accept elements matching this CSS selector accept: '#yes-drop', // Require a 75% element overlap for a drop to be possible overlap: 0.75, // 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) { event.relatedTarget.textContent = 'Dropped'; }, ondropdeactivate: function (event) { // remove active dropzone feedback event.target.classList.remove('drop-active'); event.target.classList.remove('drop-target'); } });
#outer-dropzone { height: 140px; } #inner-dropzone { height: 80px; } .dropzone { background-color: #ccc; border: dashed 4px transparent; border-radius: 4px; margin: 10px auto 30px; padding: 10px; 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; min-width: 40px; 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; }
<script src="http://code.interactjs.io/v1.2.6/interact.js"></script> <div id="no-drop" class="draggable drag-drop"> #no-drop </div> <div id="yes-drop" class="draggable drag-drop"> #yes-drop </div> <div id="outer-dropzone" class="dropzone"> #outer-dropzone <div id="inner-dropzone" class="dropzone">#inner-dropzone</div> </div>
無法進行交互.js拖放交互以使用Boostrap元素
[英]Cannot get interact.js drag & drop interactions to work with Boostrap elements
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.