Intercat JS funktioniert nicht

Question

Ich möchte Interact JS verwenden.

Für den Anfang habe ich den Demo-Code auf dieser Website verwenden.

Allerdings funktioniert es jedoch nicht. Das Skript ist geladen, aber die Elemente sind nicht als Demonstration beweglich. Ich habe den folgenden Code:

/* 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

<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>

Warum dieser Code nicht funktioniert? Es ist der Demo-Code der Dokumentation ...

Answer 1

Sie den ziehbar Code aus dem vorherigen Beispiel fehlt, lesen Sie die Kommentare auf der Oberseite des JS-Code, und schauen Sie sich das Beispiel unten

$(document).ready(function() { 
 
    
 
    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; 
 
    /* 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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.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>