Javascript Intercat JS不'；行不通

我想用

为了入门，我使用了这个网站上的演示代码

然而，它不起作用。 脚本已加载，但元素不能作为演示移动。我有以下代码：

/*上面演示中“.draggable”的拖动代码
*也适用于此演示，因此不必重复*/
//允许将可拖动项拖放到此
交互（'.dropzone'）。dropzone({
//仅接受与此CSS选择器匹配的元素
接受：“#是，放弃”，
//需要75%的元件重叠，才能进行跌落
重叠：0.75，
//侦听与拖放相关的事件：
ondropactivate:功能（事件）{
//添加主动dropzone反馈
event.target.classList.add（'drop-active'）；
},
ondragenter:函数（事件）{
var draggableElement=event.relatedTarget，
dropzoneElement=event.target；
//反馈下降的可能性
dropzoneElement.classList.add（'drop-target'）；
draggableElement.classList.add（'can-drop'）；
draggableElement.textContent='拖入'；
},
ondragleave:函数（事件）{
//删除下拉反馈样式
event.target.classList.remove（'drop-target'）；
event.relatedTarget.classList.remove（'can-drop'）；
event.relatedTarget.textContent='拖出'；
},
ondrop：功能（事件）{
event.relatedTarget.textContent='Dropped'；
},
ondropdeactivate:功能（事件）{
//删除活动dropzone反馈
event.target.classList.remove（'drop-active'）；
event.target.classList.remove（'drop-target'）；
}
});
#外部下降区{
高度：140像素；
}
#内下降区{
高度：80px；
}
.dropzone{
背景色：#ccc；
边框：虚线4px透明；
边界半径：4px；
利润率：10px自动30px；
填充：10px；
宽度：80%；
过渡：背景色0.3s；
}
.退出活动{
边框颜色：#aaa；
}
.放弃目标{
背景色：#29e；
边框颜色：#fff；
边框样式：实心；
}
.拖放{
显示：内联块；
最小宽度：40px；
填充物：2米0.5米；
颜色：#fff；
背景色：#29e；
边框：实心2px#fff；
-webkit转换：翻译（0px，0px）；
转换：转换（0px，0px）；
过渡：背景色0.3s；
}
.拖放{
颜色：#000；
背景色：#4e4；
}
仅限JS演示版

#不滴
#是的，滴
#外降落区
#内下降区
您缺少上一个示例中的可拖动代码，请阅读js代码顶部的注释，然后查看下面的示例


$（文档）.ready（函数（）{
交互（“.draggable”）
.拖拉({
//启用惯性投掷
惯性：没错，
//将元素保持在其父元素的区域内
限制：{
限制：“家长”，
是的，
elementRect:{top:0，left:0，bottom:1，right:1}
},
//启用自动滚动
autoScroll：是的，
//在每次dragmove事件中调用此函数
onmove:dragMoveListener，
//在每个dragend事件上调用此函数
ONED：功能（事件）{
var textEl=event.target.querySelector（'p'）；
textEl&（textEl.textContent）=
“移动了一段距离”
+（Math.sqrt（event.dx*event.dx+
event.dy*event.dy）| 0）+“px”）；
}
});
函数dragMoveListener（事件）{
var target=event.target，
//在data-x/data-y属性中保持拖动位置
x=（parseFloat（target.getAttribute（'data-x'））| | 0）+event.dx，
y=（parseFloat（target.getAttribute（'data-y'））| | 0）+event.dy；
//翻译元素
target.style.webkitTransform=
target.style.transform=
'翻译（'+x+'px'，+y+'px）'；
//更新posiion属性
target.setAttribute（'data-x'，x）；
target.setAttribute（'data-y'，y）；
}
//这将在稍后的调整大小和手势演示中使用
window.dragmovestender=dragmovestender；
/*上面演示中“.draggable”的拖动代码
*也适用于此演示，因此不必重复*/
//允许将可拖动项拖放到此
交互（'.dropzone'）。dropzone({
//仅接受与此CSS选择器匹配的元素
接受：“#是，放弃”，
//需要75%的元件重叠，才能进行跌落
重叠：0.75，
//侦听与拖放相关的事件：
ondropactivate:功能（事件）{
//添加主动dropzone反馈
event.target.classList.add（'drop-active'）；
},
ondragenter:函数（事件）{
var draggableElement=event.relatedTarget，
dropzoneElement=event.target；
//反馈下降的可能性
dropzoneElement.classList.add（'drop-target'）；
draggableElement.classList.add（'can-drop'）；
draggableElement.textContent='拖入'；
},
ondragleave:函数（事件）{
//删除下拉反馈样式
event.target.classList.remove（'drop-target'）；
event.relatedTarget.classList.remove（'can-drop'）；
event.relatedTarget.textContent='拖出'；
},
ondrop：功能（事件）{
event.relatedTarget.textContent='Dropped'；
},
ondropdeactivate:功能（事件）{
//删除活动dropzone反馈
event.target.classList.remove（'drop-active'）；
event.target.classList.remove（'drop-target'）；
}
});
})
#外部下降区{
高度：140像素；
}
#内下降区{
高度：80px；
}
.dropzone{
背景色：#ccc；
边框：虚线4px透明；
边界半径：4px；
利润率：10px自动30px；
填充：10px；
宽度：80%；
过渡：背景色0.3s；
}
.退出活动{
边框颜色：#aaa；
}
.放弃目标{
背景色：#29e；
边框颜色：#fff；
边框样式：实心；
}
.拖放{
显示：内联块；
最小宽度：40px；
填充物：2米0.5米；
颜色：#fff；
背景色：#29e；
边框：实心2px#fff；
-webkit转换：转换（0px，