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

$（document）.ready（function（）{ dodragable（）; function dodragable（）{ $（＆＃39; .drag＆＃39）。可拖动（{ 帮手：＆＃34;克隆＆＃34;， appendTo：＆＃34;主体＆＃34 ;, 还原：＆＃34;无效＆＃34; }）; }

$('.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

乍一看，我认为你没有在'make me draggable'元素上调用.draggable()：var a = u.helper.clone();包含被删除的元素，而不是你要删除的元素。

如果您希望在放置div时使div可拖动，则应检查event target。

否则，如果你想在掉话电话$（'drop'）上使其可拖动.dragggable（{containment：“。container”}）;

Answer 3

根据您的评论＆＃34;我们可以在＆＃34;使我可拖动＆＃34;上进行双击和单击事件。 div - ＆＃34;我们可以通过一个技巧来完成，但是在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
    });

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

3 个答案: