如果已经在容器中已经退出，我们如何使元素可以拖动和放置？

Question

我正在jquery-UI上工作，我能够使html元素可拖动和可拖拽，但是这些所有元素都不是容器的一部分，因此在放入容器之前，这些元素都存在于容器之外，并将所有这些内容拖拽到容器中。放下这些元素后也移动到容器内。但后来我有一个想法，我复制html代码的元素，并把它放在容器中，然后我重新加载我的浏览器窗口现在有三个div： 拖动我，让我拖动（复制内容）。我的问题是， div在容器内（让我拖动）不动。所以，请任何一个帮助我下面是我的代码：

$(document).ready(function() { 
    $('.drag').draggable({ 
    helper: "clone", 
    appendTo: "body", 
    revert: "invalid" 
    }); 

    $('.container').droppable({ 
    accept: ".drag", 
    drop: function(e, u) { 
     var a = u.helper.clone(); 
     var parent = $('.container'); 

     a.css("z-index", 1000); 
     a.appendTo(".container"); 

     var leftAdjust = a.position().left - parent.offset().left; 
     var topAdjust = a.position().top - parent.offset().top; 

     a.css({ 
     left: leftAdjust, 
     top: topAdjust 
     }); 

     console.log("INFO: Accepted: ", a.attr("class")); 
     a.attr('class', 'dropped').draggable({ 
     containment: ".container" 
     }); 
    } 
    }); 
}); 

.drag { 
    text-align: center; 
    margin-top: 5px; 
    width: 100px; 
    height: 100px; 
    color: white; 
    background-color: red; 
    margin-bottom: 5px; 
    border: 1px solid black; 
} 
.container { 
    text-align: center; 
    width: 400px; 
    margin-top: 5px; 
    margin-left: 5%; 
    height: 400px; 
    color: white; 
    background-color: green; 
    border: 1px solid black; 
} 
.dropped { 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    color: white; 
    background-color: red; 
    border: 1px solid black; 
} 
body { 
    display: flex; 
} 

<div class="drag">Drag me</div> 
<div style="position:relative" class="container">drop here !! 
    <div class="dropped ui-draggable" style="position: absolute; left: 299px; top: 299px; z-index: 1000;">Make me draggable</div> 
</div> 

Answer 1

我并没有太多的改变你的代码，因为我不知道很多关于你的目标，但回落后完成后，我制作了Make me draggable div draggable（请参阅fiddle）。

$（文件）。就绪（函数（）{ dodragable（）; 功能dodragable（）{ $（ '拖'）拖动（{ 帮手： “克隆”， appendTo：“身上。 ” 复归：‘无效的’ }）; }

$('.container').droppable({ 
      accept: ".drag", 
      drop: function(e, u) { 
      var a = u.helper.clone(); 
      var parent = $('.container'); 
       a.css("z-index", 1000); 
       a.appendTo(".container"); 
      var leftAdjust = a.position().left - parent.offset().left; 
      var topAdjust = a.position().top - parent.offset().top; 
      a.css({left: leftAdjust, top: topAdjust}); 

       console.log("INFO: Accepted: ", a.attr("class")); 
       a.attr('class', 'dropped').draggable({ 
       containment: ".container" 
       }); 

       $('.make_dragable').draggable(); 
       dodragable() 
      } 
     }); 
}); 

Answer 2

乍一看，我认为你已经不叫.draggable()的‘让我拖动’的元素：var a = u.helper.clone();包含下降元素，而不是一个你正在下降。

如果你想让div可拖动时，你应该检查event target。否则，如果您想在拖放调用$（'dropped'）时使其可拖动。draggable（{containment：“.container”}）;

Answer 3

根据您的评论“我们可以让双击和单一的点击事件‘让我拖动’分区 - ”我们可以通过一个把戏做，但你会得到这里只需一次点击检查fiddle

几秒钟的延迟

var DELAY = 700, clicks = 0, timer = null; 
    $(".make_dragable").on("click", function(e){ 

     clicks++; //count clicks 

     if(clicks === 1) { 

      timer = setTimeout(function() { 

       alert("Single Click"); //perform single-click action  
       clicks = 0;    //after action performed, reset counter 

      }, DELAY); 

     } else { 

      clearTimeout(timer); //prevent single-click action 
      alert("Double Click"); //perform double-click action 
      clicks = 0;    //after action performed, reset counter 
     } 

    }) 
    .on("dblclick", function(e){ 
     e.preventDefault(); //cancel system double-click event 
    });