Javascript 可拖动元件

拖放 // 滴管{ 显示：内联块； 保证金：50px 10px 10px 50px； 垂直对齐：顶部； 背景色：555； 边框：1px实心111； -moz边界半径：10px； 边界半径：10px； -moz转换：所有200ms线性； -webkit转换：所有200ms线性； -o型过渡：所有200ms线性； 过渡：所有200ms线性； } .悬停{ -moz盒阴影：0 30px rgba0,0,0,0.8插入； 盒影：0 0 30px rgba0,0,0,0.8嵌入； } .拖拉{ 显示：内联块； 保证金：20px 10px 10px 20px； 填充顶部：20px； 宽度：60px； 高度：30px； 颜色：3D110F； 背景色：822520； 边框：4px实心3D110F； 文本对齐：居中； 字号：1em； 光标：移动； -moz转换：所有200ms线性； -webkit转换：所有200ms线性； -o型过渡：所有200ms线性； 过渡：所有200ms线性； -moz用户选择：无； -khtml用户选择：无； -webkit用户选择：无； 用户选择：无； } 区块1 区块2 区块3 var x=document.queryselectoral.dropper'； x[0].样式.高度=600px； x[0].style.width=200px； x[1].样式.高度=600px； x[1].style.width=999px； ​ 作用{ 变量dndHandler={ draggedElement:null，//Propriétépointantvers lélémenten cours deéplacement applyDragEvents:functionelement{ element.draggable=true； var dndHandler=this；//变量est nécessaire pour que lévénement«dragstart»ci dessous accède facilement au namespace«dndHandler» 元素。addEventListener'dragstart'，函数E{ dndHandler.draggedElement=e.target；//关于sauvegarde l'lélément的课程安排 e、 dataTransfer.setData'text/plain'，；//Nécessaire pour Firefox }，假； }, applyDropEvents:功能滴管{ 滴管。添加了监听器“dragover”，函数E{ e、 preventDefault；//在自动恢复删除数据时 this.className='dropper drop_hover'；//Et on the appilique le style adéquaténotre zone de drop quand unélément la survole }，假； dropper.addEventListener'dragleave'，函数{ this.className='dropper'；//关于上一篇文章的风格 }; var dndHandler=this；//变量est nécessaire pour que lévénement«drop»ci dessous accède facilement au namespace«dndHandler» dropper.addEventListener'drop'，函数E{ var目标=e.target， draggedElement=dndHandler.draggedElement，//Récupération de lélélément concerné clonedElement=draggedElement.cloneNodetrue；//关于克隆的复制 而target.className.indexOf'dropper'==-1{//Cette boucle permet de remonter jusqu'la zone de drop parente target=target.parentNode； } Talk.CordNe=“滴管”；//应用DU风格 clonedElement=target.appendChildclonedElement；//A退出行动区 dndHandler.applyDragEventsclonedElement；//新的应用程序用于克隆节点 draggedElement.parentNode.removeChildCloneElement；//抑制源代码 }; } }; var elements=document.queryselectoral'.draggable'， elementsLen=elements.length； 对于变量i=0；i因为你是作为实习生被分配到这项任务的，所以给出一个完整的答案，包括完成的代码，并不能达到任务的目的：学习如何自己完成这项任务。看到你在这里问这个问题而没有得到你上司的帮助，我也感到惊讶；她有助教 我想帮助你学习

现在，回答实际问题： 您当前正在拖动的东西实际上不是元素本身，而是一些浏览器对拖动的可视化。jQueryUI的$.draggable对您没有帮助，因为它不允许您在任何其他元素上开始拖放，所以不能在克隆元素或类似的元素上进行拖放

您可能希望使用jQuery编写自己的拖放代码，在这种情况下，以下函数可能会派上用场：

确定页面的绝对位置的步骤 确定元素的相对位置的步骤 获取鼠标位置 使用$'：hover'；您可以在鼠标下获取当前的所有元素 就我个人而言，我会听鼠标在块上向下移动，克隆当前块，将其添加到主体中，并将其设置到正确的位置。 听正文/文档上的mousemove和mouseup。将克隆元素相应地移动到mousemove上的鼠标位置，然后在mouseup上删除克隆元素或将其添加到右侧droparea

我们已经就此事联系了几天。我们可以永远保持这种状态，但这也没有任何意义。下面是一些示例代码，包括注释。请仔细研究，试着理解思维方式。如果有任何部分你不明白，不要犹豫问

!functione{var n=！1，o=！0；e.elementFromPoint=functiont，l{if！document.elementFromPoint返回null；if！n{var m；m=edocument.scrollTop>0？o=null==document.elementFromPoint0，m+ewindow.height-1:m=edocument.scrollLeft>0&&o=null==document.elementFromPointm+ewindow.width-1,0，n=m>0}返回o | | t+=edocument.scrollLeft，l+=edocument.scrollTop，edocument.elementfrompoint，l}}jQuery； //创建可在事件之间访问的变量： var dragging={$element:null，偏移量：{left:0，top:0}； //聆听鼠标向下移动。可在内部拖动。dropperdrag_来自： $'.dropperdrag_from'.on'mousedown'，'.draggable'，functionevent{ //防止正常行为选择文本等： 违约事件； //克隆此.draggable元素： 拖动。$element=$this.clone； //确定鼠标相对于此可拖动元素的位置： dragging.offset.left=event.pageX-$this.offset.left； dragging.offset.top=event.pageY-$this.offset.top； //将元素设置为'absolute'，这样它就不会干预其他元素，更正相对于页面的位置，更正边距，并且不捕获$'：hover'所需的鼠标事件： 拖动.$element.css{position:'absolute'，left:event.pageX-dragging.offset.left，top:event.pageY-dragging.offset.top，margin:'0'，'pointer events'：'none'}； //最后，将克隆的元素附加到页面的body元素： $'body'.appendDraging.$element； }; //在页面的任意位置收听mousemove和mouseup： $'body'。在'mousemove'上，functionevent{ //仅当拖动时： ifr.$element{ 违约事件； //将元件移动到正确的位置： 拖动.$element.css{left:event.pageX-dragging.offset.left，top:event.pageY-dragging.offset.top}； } }.on'mouseup'，functionevent{ //仅当拖动时： ifr.$element{ //将鼠标悬停在滴管上时： 如果$.elementFromPointevent.pageX，event.pageY.prop'id'=='drop\u in'{ //设置相对于滴管的位置： 拖动.$element.css{left:event.pageX-$'.dropperdrop_in'.offset.left-dragging.offset.left，top:event.pageY-$'.dropperdrop_in'.offset.top-拖动.offset.top} //将元件从主体移动到滴管： $'.dropperdrop_in'.appendDraging.$element； }否则{ //从文档中删除克隆的元素： 拖动.$element.remove； } //不再拖动： 拖动。$element=null； } }; html，正文{宽度：100%；高度：100%；} .拖拉{ 位置：相对位置； 浮动：左； 边界半径：15px； 边框：1p实心999； 背景：白色； 宽度：100px； 高度：50px； 利润率：10px 0 10px； 填充顶部：20px； 字体系列：塔荷马，日内瓦，无衬线； 文本对齐：居中； } 滴管{ 位置：相对位置； 浮动：左； 边界半径：15px； 边框：1p实心999； 背景：-webkit线性梯度左，中交，EEEE； 背景：-moz线性梯度CCCC，EEEEEE； 宽度：600px； 高度：600px； 保证金：50px 10px 10px 10px； } .dropperdrag_从{ 宽度：230px； } 可降落 拖我！ 把我也拖走！

---

你测试过Draggably插件吗？它很棒，功能齐全。我认为你的问题可以用一些方法来解决

可以在网格上拖动、父元素、拖动限制和事件操纵

---

祝你好运

你介意添加HTML吗？和

---

甚至可能创建一个？我创建了一个可运行的代码段。我开始使用html/css/jquery/jscript进行编程。所以这是某种学校作业？我正在实习，我应该创建一个应用程序网站来制作类似Grafcet的东西。就像在代码段中一样，一个块包含工具和一个块，我们可以在其中放置工具并将它们相互链接。还有一个按钮，它将根据工具的顺序生成脚本。谢谢您的回答。我试过了，但没用。我会尽力澄清我的问题。我想要的是这样的东西：我想我有自己的想法，但我不知道怎么做。如果拖动位置更高，例如50px top和200px left{$function{$dg1.draggable；}；}；}，这意味着当我将元素拖动到右侧块时，它变成了可拖动的，这将允许我将它们放到任何我想要的地方。或者有没有一种方法可以给克隆的元素一个类，这样我就可以对它们应用我想要的函数？好吧，您当前的代码没有使用任何库，$。不过，可拖动的似乎是jQuery UI。我建议您要么用纯JS编写代码，要么使用该库创建一些东西，以保持代码干净、可读/易懂。我重写了我的答案，因为我意识到您并没有真正拖拉任何东西，只有浏览器拖。谢谢您，我只使用jQuery重写了代码。我将把它作为一个片段。我还有一个小问题。我会在回答中解释的。我看不出Draggably插件和普通jQuery之间有什么区别