1
我试图运行interact.js拖放方法,如example本身。我下载了interact.js和interact.min.js,并将它们包含在我的html文件中。但是这个功能似乎没有实现。任何建议在这方面将不胜感激。我所提供的的jsfiddle在上下文中的代码下面使用interact.js拖放功能
/**
* 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>
致谢。你介意显示这个jsFiddle版本 –
看到你在示例中没有太多变化,只需将第一个示例的JS复制到当前的代码中,它就可以工作。 :) – Klotor
此外,你不neet包括这两个interact.js文件,应该足以让离开缩小的版本。 – Klotor