正文 

当前位置： 首页 > 知识 >

在拖动另一个元素之前，可拖动的将不起作用

     2023-05-08     125

关键词：

【中文标题】在拖动另一个元素之前，可拖动的将不起作用【英文标题】：draggable won't work untill another element is dragged 【发布时间】：2021-09-26 00:24:49 【问题描述】：

我在使用可拖动的 div 时遇到问题，我正在尝试构建一个用户界面，您可以在其中从调色板拖放到工作区中。

基本上我所做的是我有一个隐藏的 div，其中包含每个调色板项目所代表的元素，当我单击调色板项目时，我克隆相应的隐藏项目并将其附加到编辑器 div（因此可以移动all arround），然后触发鼠标事件（因此您不必再次单击即可移动它）。

之后，克隆的项目（已存储在全局变量中）在放置时从文档中删除，如果元素被放置在工作区上，那么我将元素附加到工作区（因此只能在工作区），但在您将新元素放入工作区之前不会移动。

这是我的代码：。

CSS：

<style>
    #editor
        position: relative;
        height: 100%;
        width: 100%;
        background: lightcyan;
    
    #elements
        display: none;
    
    #palette
        height: 100%;
        width: 125px;
        float: left;
        background: lightgrey;
    
    .editor-pane
        height: 10%;
        width: 20%;
        float: left;
        background: lightyellow;
        position: absolute;
    
    .editor-palette-item
        width: 16px;
        height: 16px;
    
    .palette-item-container
        cursor: pointer;
        cursor: hand;
        padding: 16px;
    

    #workspace
        height: 100%;
        width: 70%;
        float: left;
        background: white;
    
    body
        width: 97%;
        height: 750px;
    
</style>

html: 

<div id="editor" style="border: solid; ">
    <div id="palette">
        <div class="palette-item-container" elementId="element1">
            <div class="ui-icon ui-icon-alert"></div>
            Element1
        </div>
        <div class="palette-item-container" elementId="element2">
            <div class="ui-icon ui-icon-alert"></div>
            Element2
        </div>
        <div class="palette-item-container" elementId="element3">
            <div class="ui-icon ui-icon-alert"></div>
            Element3
        </div>
    </div>

    <div id="workspace">
        
    </div>
    
    <div id="elements">
        <div id="element1" class="editor-pane"></div>
        <div id="element2" class="editor-pane"></div>
        <div id="element3" class="editor-pane"></div>
    </div>
</div>

脚本

<script>
    var ElementCopy = null;
    
    $('#palette .palette-item-container').mousedown(function(evt) 
        ElementCopy = $('#' + $(this).attr("elementId")).clone().removeAttr('id');
        $('#editor').append(ElementCopy);
        ElementCopy.draggable(
            containment: "parent"
        );
        ElementCopy.css("left", evt.clientX - 20 + "px");
        ElementCopy.css("top", evt.clientY - 20 + "px");
        ElementCopy.trigger(evt);
        // console.log(evt);

        ElementCopy.mouseup(function(e)
            ElementCopy.draggable( "destroy" );
            ElementCopy.remove();
        );
    ); 
    
    $('#workspace').droppable(
        drop: function(evt) 
            if (ElementCopy)
                $('#workspace').append(ElementCopy);
                $('#workspace .editor-pane').resizable(
                    containment: "parent"
                )
                .draggable(
                    containment: "parent"
                );
                // $('#workspace .editor-pane').addClass('ui-draggable-handle');
            
        
    );

</script>


<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <title>Document</title>
        <style>
            #editor
                position: relative;
                height: 100%;
                width: 100%;
                background: lightcyan;
            
            #elements
                display: none;
            
            #palette
                height: 100%;
                width: 125px;
                float: left;
                background: lightgrey;
            
            .editor-pane
                height: 10%;
                width: 20%;
                float: left;
                background: lightyellow;
                position: absolute;
            
            .editor-palette-item
                width: 16px;
                height: 16px;
            
            .palette-item-container
                cursor: pointer;
                cursor: hand;
                padding: 16px;
            

            #workspace
                height: 100%;
                width: 70%;
                float: left;
                background: white;
            
            body
                width: 97%;
                height: 750px;
            
        </style>
    </head>
    <body>
        <div id="editor" style="border: solid; ">
            <div id="palette">
                <div class="palette-item-container" elementId="element1">
                    <div class="ui-icon ui-icon-alert"></div>
                    Element1
                </div>
                <div class="palette-item-container" elementId="element2">
                    <div class="ui-icon ui-icon-alert"></div>
                    Element2
                </div>
                <div class="palette-item-container" elementId="element3">
                    <div class="ui-icon ui-icon-alert"></div>
                    Element3
                </div>
            </div>
        
            <div id="workspace">
                <!-- <div id="element2" class="editor-pane"></div> -->
            </div>
            
            <div id="elements">
                <div id="element1" class="editor-pane">element1 data</div>
                <div id="element2" class="editor-pane">element2 data</div>
                <div id="element3" class="editor-pane">element3 data</div>
            </div>
        </div>

        <script>
            var ElementCopy = null;
            /*  $("#element2").resizable(
                    containment: "parent"
                ).draggable(
                    containment: "parent"
            ); */
            $('#palette .palette-item-container').mousedown(function(evt) 
                // console.log($(this).attr("elementId"));
                ElementCopy = $('#' + $(this).attr("elementId")).clone().removeAttr('id');
                $('#editor').append(ElementCopy);
                ElementCopy.draggable(
                    containment: "parent"
                );
                ElementCopy.css("left", evt.clientX - 20 + "px");
                ElementCopy.css("top", evt.clientY - 20 + "px");
                ElementCopy.trigger(evt);
                // console.log(evt);

                ElementCopy.mouseup(function(e)
                    ElementCopy.draggable( "destroy" );
                    ElementCopy.remove();
                );
            ); 
            
            $('#workspace').droppable(
                drop: function(evt) 
                    if (ElementCopy)
                        $('#workspace').append(ElementCopy);
                        $('#workspace .editor-pane').resizable(
                            containment: "parent"
                        )
                        .draggable(
                            containment: "parent"
                        );
                        // $('#workspace .editor-pane').addClass('ui-draggable-handle');
                    
                
            );

        </script>
    </body>
    </html>

【问题讨论】：

欢迎来到 Stack Overflow。我怀疑问题出在 mousedown 事件的逻辑范围内。我认为这是在以一种无法初始化可拖动和捕获事件的方式冒泡。因此，直到第二个 mousedown 事件才初始化可拖动对象。您是否有理由不只是将这些元素初始化为可拖动？ 我需要能够构建一个可自定义的工作区，然后将其保存为模板以在不同的页面中可视化，所以这就像某种页面构建器，所以，如示例，我需要能够拖动元素，或者甚至不存在。 【参考方案1】：

考虑以下示例。

$(function() 
  $('#palette > .palette-item-container').draggable(
    containment: $("#editor"),
    helper: "clone",
    cursorAt: 
      left: -5,
      top: -5
    
  );

  $('#workspace').droppable(
    drop: function(evt, ui) 
      var elemCopy = ui.helper.clone().removeClass("ui-draggable ui-draggable-handle ui-draggable-dragging");
      elemCopy.attr("id", null).appendTo(this);
      elemCopy.draggable(
        containment: "parent"
      ).resizable(
        containment: "parent"
      );
    
  );
);
#editor 
  position: relative;
  height: 100%;
  width: 100%;
  background: lightcyan;


#elements 
  display: none;


#palette 
  height: 100%;
  width: 125px;
  float: left;
  background: lightgrey;


.editor-pane 
  height: 10%;
  width: 20%;
  float: left;
  background: lightyellow;
  position: absolute;


.editor-palette-item 
  width: 16px;
  height: 16px;


.palette-item-container 
  cursor: pointer;
  cursor: hand;
  padding: 16px;


#workspace 
  height: 100%;
  width: 70%;
  float: left;
  background: white;


body 
  width: 97%;
  height: 750px;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="editor" style="border: solid; ">
  <div id="palette">
    <div class="palette-item-container" elementId="element1">
      <div class="ui-icon ui-icon-alert"></div>
      Element1
    </div>
    <div class="palette-item-container" elementId="element2">
      <div class="ui-icon ui-icon-alert"></div>
      Element2
    </div>
    <div class="palette-item-container" elementId="element3">
      <div class="ui-icon ui-icon-alert"></div>
      Element3
    </div>
  </div>

  <div id="workspace">
    <!-- <div id="element2" class="editor-pane"></div> -->
  </div>

  <div id="elements">
    <div id="element1" class="editor-pane">element1 data</div>
    <div id="element2" class="editor-pane">element2 data</div>
    <div id="element3" class="editor-pane">element3 data</div>
  </div>
</div>

当你克隆一个元素时，默认情况下它不会克隆事件回调。因此，克隆的 Draggable Helper 将不可拖动。然而，它可能还剩下一些课程。通常最好的解决这一切的方法是 Droppable。

【讨论】：

问题是，在这段代码中，您从调色板本身克隆元素，但我不能这样做，因为在每个元素内部，都会有数据，数据太大或太乱而无法容纳在调色板上，所以调色板元素是元素的表示，而不是元素本身。此外，由于某种原因，此代码在第二次拖动后复制了元素:(​​

JQuery可拖动：使用助手时滚动不起作用：使用克隆

】JQuery可拖动：使用助手时滚动不起作用：使用克隆【英文标题】：JQuerydraggable:scrollnotworkingwhenhelper:cloneisused【发布时间】：2010-12-1516:03:18【问题描述】：我有一个文件夹列表类型的情况，我可以使用jquerydraggable/droppable将项目... 查看详情

发出可拖动元素中包含的拖动元素

】发出可拖动元素中包含的拖动元素【英文标题】：Issuedraggingelementcontainedinadraggableelement【发布时间】：2018-09-1900:34:28【问题描述】：嗯，当我将一个包含在另一个可拖动div中的可拖动div拖动到另一个可拖动div时，我遇到了问题... 查看详情

jQuery 拖放模拟对最后一个可拖动对象不起作用

】jQuery拖放模拟对最后一个可拖动对象不起作用【英文标题】：jQuerydraganddropsimulationdoesnotworkforthelastdraggable【发布时间】：2019-06-2703:27:44【问题描述】：我正在尝试使用jquery-ui的jquery-simulate-ext插件模拟拖放模拟。在我给出场景... 查看详情

jquery - 如何让列表元素可排序并且也可拖动到另一个列表

】jquery-如何让列表元素可排序并且也可拖动到另一个列表【英文标题】：jquery-howtohavelistelementsbesortableandalsodraggabletoanotherlist【发布时间】：2013-04-0615:40:57【问题描述】：我有两个列表-A和B我希望列表B可以在其内部进行排序。这... 查看详情

通过拖动元素传递 mouseover 事件

】通过拖动元素传递mouseover事件【英文标题】：passmouseovereventthroughdraggingelement【发布时间】：2012-10-0613:59:03【问题描述】：我有一个自定义的可拖动元素（拖动开始于单击并结束于单击），可以将其拖放到某些区域。在鼠标悬... 查看详情

谷歌地图可拖动标记在折叠类引导程序中不起作用

】谷歌地图可拖动标记在折叠类引导程序中不起作用【英文标题】：GoogleMapsdraggablemarkernotworkincollapseclassbootstrap【发布时间】：2018-05-1812:09:25【问题描述】：我想在折叠类引导程序中放置一个Google地图可拖动标记，但它不起作用... 查看详情

jquery可拖动+ html5视频不起作用

】jquery可拖动+html5视频不起作用【英文标题】：jquerydraggable+html5videonotworking【发布时间】：2014-07-2120:13:27【问题描述】：我正在使用jqueryUI来使div可拖动。在一个div中包含一个html5视频。这适用于Chrome和Firefox，但不适用于IE11。请... 查看详情

可拖动不起作用

】可拖动不起作用【英文标题】：Draggableisnotworking【发布时间】：2015-08-0322:32:38【问题描述】：我正在尝试使用包含在我的html文件标题中的脚本来实现可拖动（拖放）图片。我有这个项目的3个单独的文件；html、css和js。但是，... 查看详情

如何使用 JQuery 制作可拖动元素？

】如何使用JQuery制作可拖动元素？【英文标题】：HowtomakeadraggableelementusingJQuery?【发布时间】：2021-07-0517:29:17【问题描述】：我正在尝试使用JQuery使元素可拖动我试过this，但它不起作用，因为脚本不起作用，而且看起来没有链接... 查看详情

iOS 7：在 UITableView / delaysContentTouches 中拖动似乎不起作用

】iOS7：在UITableView/delaysContentTouches中拖动似乎不起作用【英文标题】：iOS7:DragginginUITableView/delaysContentTouchesseemsnotworking【发布时间】：2013-10-0606:44:35【问题描述】：我有一个iPad应用程序，在UITableView中有可拖动的内容...tableView可... 查看详情

可拖动的 jQuery UI 在 chrome 中不起作用

】可拖动的jQueryUI在chrome中不起作用【英文标题】：jQueryUIdraggablenotworkinginchrome【发布时间】：2014-07-2318:41:17【问题描述】：jQuery可拖动在chrome中不起作用代码：<scriptsrc="js/jquery-1.6.2.min.js"type="text/javascript"></script><script... 查看详情

检查 droppable 是不是已经包含另一个可拖动元素（jQuery UI）

】检查droppable是不是已经包含另一个可拖动元素（jQueryUI）【英文标题】：Checkifdroppablealreadycontainsanotherdraggableelement(jQueryUI)检查droppable是否已经包含另一个可拖动元素（jQueryUI）【发布时间】：2012-02-0319:55:24【问题描述】：我有... 查看详情

可拖动的innerHTML列表项不起作用

】可拖动的innerHTML列表项不起作用【英文标题】：innerHTMLlistitemsdragablenotworking【发布时间】：2016-12-1002:22:32【问题描述】：这是我的代码。当我调用initinnerHTML时列表项不可拖动我不知道我卡在哪里了。test1和test2不可拖动可以拖... 查看详情

如何让我的 JQueryUI 可拖动元素浮动到另一个溢出的元素中？

】如何让我的JQueryUI可拖动元素浮动到另一个溢出的元素中？【英文标题】：HowcanIhavemyJQueryUIdraggableelementsfloatoverintoanotheroverflowedelement?【发布时间】：2014-01-2423:57:13【问题描述】：我有两个可以在iPad上滚动的区域，所以我将它... 查看详情

将可拖动对象放入可排序对象后，jQuery Click 事件不起作用

】将可拖动对象放入可排序对象后，jQueryClick事件不起作用【英文标题】：jQueryClickeventnotworkingafterdraggableisdroppedintosortable【发布时间】：2012-12-3008:00:31【问题描述】：使用jQueryUI教程中提供的示例：jQueryUIDraggable+Sortable当我将可... 查看详情

如何使用 HTML5 使某些元素可拖动和其他可放置？

】如何使用HTML5使某些元素可拖动和其他可放置？【英文标题】：HowtomakesomeelementsdraggableandotherdroppableusingHTML5?【发布时间】：2012-05-3106:42:12【问题描述】：我想将一些元素拖放到其他容器中。以下示例适用于可拖动和可放置的对... 查看详情

向后移动时可拖动元素覆盖另一个元素

】向后移动时可拖动元素覆盖另一个元素【英文标题】：Draggableelementcoversanotheronewhenmovingback【发布时间】：2011-11-2716:54:57【问题描述】：目前我在http://jsfiddle.net/nivea75ml/yCnh5/的演示中遇到了一个小问题。每当我将一个粉红色框... 查看详情

jQuery 可拖动的恢复和停止事件

】jQuery可拖动的恢复和停止事件【英文标题】：jQuerydraggablerevertandstopevent【发布时间】：2011-08-2003:43:03【问题描述】：第一个问题，请善待:)我要做的是在用户释放可拖动对象时以及在还原动画完成之前调用一个函数。据我所知... 查看详情