Question

我有一个包含相似主要div元素的页面，它们都包含相同的结构。主要元素是droppable，带有图像的子元素是可拖动的。使用图像拖动子元素并将其放入另一个主元素中将拖动的图像与放入其中的主元素中的图像组合在一起。在主元素的末尾，有焦点，模糊和更改事件背后的功能的输入字段，用于检查/控制输入。

所以我可以组合两个主要元素的图像，但我也想将图像分成两个主要元素。单击“image_divider”-div，我现在克隆具有所有功能的完整主元素（使用deepWithEventsAndData克隆），然后删除每个重复主元素中不需要的图像。

一切顺利（焦点，模糊和更改事件继续在克隆的输入字段上工作），但拖动克隆的主元素的图像仍然拖动它克隆的原始主元素的图像的。

我尝试在没有deepWithEventsAndData或withEventsAndData的情况下进行克隆，在克隆后重新触发setupDragDrop函数，然后在克隆的主元素上进行拖放工作，但后来我放松了模糊，焦点和变化事件的功能。输入字段，因为它没有复制过来。

我看到克隆还会从原始主元素复制eventnamespace，也许这与它有关。我不知道还有哪些被复制应该被克隆的主要元素而不是被盲目复制，或者如何删除克隆元素上的可拖动/可放置功能并在克隆后重新附加它们，所以它可以独立工作元素而不是原始主元素的元素。

有人能指出我正确的方向吗？

javascript：



    setupDragDrop();

    function setupDragDrop() {
      $("html").find(".serie_row .links").draggable({ axis: "y", revert: true});
      $("html").find(".serie_row").droppable({
        accept: ".links",
        hoverClass: "hilite-droppable",
        drop: function( event, ui ){
          // Add images and dividers at the end of the droppable serie
          ui.draggable.find("div").appendTo($(this).find(".links"));
          // Remove empty series
          $("html").find(".serie_row .links").not(":has(.image)").parents(".serie_row").remove().fadeOut();
        }
      });
    }

    $(".image_divider").click(function() {
      var serie_row = $(this).parents(".serie_row");
      serie_row.after(serie_row.clone(true).fadeIn());

      var new_serie_row = serie_row.next(".serie_row");

      // Remove all divided elements from first serie
      $(this).nextAll(".image").remove().fadeOut();
      $(this).nextAll(".image_divider").remove().fadeOut();
      var n = $(this).index();
      $(this).remove().fadeOut();

      // Remove all elements for first serie from cloned serie
      new_serie_row.find(".links").find("div").slice(0,n+1).remove().fadeOut();

    });

我在页面上多次使用的主要元素

<div class="row serie_row ui-droppable">
  <input type="hidden" class="serial" value="1" name="serial">
  <div class="col-lg-9">
    <div class="links ui-draggable ui-draggable-handle" id="links1" style="position: relative;">
      <div class="image">
        <a title="IMG_0195.JPG" href="/IMG_0195.JPG">
          <img alt="IMG_0195.JPG" src="/IMG_0195.JPG">
        </a>
      </div>
      <div class="image_divider"></div>
      <div class="image">
        <a title="IMG_0196.JPG" href="/IMG_0196.JPG">
          <img alt="IMG_0196.JPG" src="IMG_0196.JPG">
        </a>
      </div>
      <div class="image_divider"></div>
      <div class="image">
        <a  title="IMG_0197.JPG" href="/IMG_0197.JPG">
          <img alt="IMG_0197.JPG" src="/IMG_0197.JPG">
        </a>
      </div>
    </div>
  </div>
  <div class="col-lg-3">
    <div class="row info_pv">
      <div class="col-lg-3 col-lg-offset-1"> 
         <div class="caption text-center">Type</div>
         <div>
           <select class="form-control eltype">
             <option> </option>
             <option>Type 1</option>
             <option>Type 2</option>
             <option>Type 3</option>
             <option>Type 4</option>
           </select>
         </div>
       </div>
       <div class="col-lg-4">
         <div class="caption text-center">Nummer</div>
         <div>
           <input type="text" class="form-control input-large elnumber" name="elnumber">
         </div>
       </div>
         <div class="col-lg-3">
           <div class="caption text-center">Jaar</div>
           <div>
             <select class="form-control elyear">
               <option></option>
               <option>2014</option>
               <option>2013</option>
             </select>
           </div>
         </div>
       <div class="col-lg-1">
     </div>
   </div>
 </div>

Answer 1

我尝试在没有deepWithEventsAndData或withEventsAndData的情况下进行克隆，在克隆后重新触发setupDragDrop函数，然后在克隆的主元素上进行拖放工作，但随后我放松了模糊，焦点和变化事件的功能。输入字段，因为它没有复制过来。

您可以通过委派输入字段的事件处理程序来解决此问题。

例如，

$(document).on("blur","input",function(){
  // logic
});

这适用于动态生成的元素，这些元素匹配作为第二个参数传递给.on()方法的选择器。

这样您就可以重新触发克隆元素的拖放设置。

克隆后，JQuery可拖动功能无法处理正确的元素

1 个答案: