Drag and drop functionality using interact.js
Question
I've tried to run the interact.js drag and drop method as in the example itself. I downloaded the interact.js and interact.min.js and include them in my html file as well. But the function doesn't seem to be implemented. Any suggestions in this regard will be appreciated. I've provided the jsFiddle for the code in context below
/** * 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 answers
solution1
2 2016-08-03 09:57:30
您发布的JS仅是用于dropzone处理的代码，您还需要在链接页面上的第一个示例中添加片段，以便进行拖动。
solution2
2 ACCPTED 2016-08-03 10:43:43
Just thought of posting the working version
// 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Drag and drop with interact.js
Can't drag and drop to another div using interact.js
How to Drag, Drop and Clone an object using interact.js
interact.js drag/drop referencing div
Drag with interact.JS
how to restrict drag elements in interact.js
Keyboard support in interact.js drag
Cannot get interact.js drag & drop interactions to work with Boostrap elements
interact.js 1.2.4 drag and gesture action confusion
interact.js drag not working on chrome mobile emulator
Related Tags