使用interact.js拖放功能

Question

I've tried to run the interact.js drag and drop method as in the example itself. 我已经尝试像示例本身一样运行interact.js拖放方法。 I downloaded the interact.js and interact.min.js and include them in my html file as well. 我下载了interact.js和interact.min.js，并将它们也包含在我的html文件中。 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 我在下面的上下文中为代码提供了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>

Answer 1

您发布的JS仅是用于dropzone处理的代码，您还需要在链接页面上的第一个示例中添加片段，以便进行拖动。

Answer 2

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>

使用interact.js拖放功能

问题描述

2 个解决方案

解决方案1
2 2016-08-03 09:57:30

解决方案2
2 已采纳 2016-08-03 10:43:43

使用interact.js拖放功能

问题描述

2 个解决方案

解决方案1 2 2016-08-03 09:57:30

解决方案2 2 已采纳 2016-08-03 10:43:43

解决方案1
2 2016-08-03 09:57:30

解决方案2
2 已采纳 2016-08-03 10:43:43