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