Question

我构建了一个类似“trip planner”的项目，但是我需要在我的克隆div-object上添加一个带有css的左边界的一个verticl行：

.line
  { width:5px, height:200px; background:red;}

所以要成为like this（你可以看到悬停在垂直线上）

我尝试用代码执行此操作：

$(function() {
    //$( ".draggable" ).resizable();
    $( ".draggable" ).draggable({
      revert: 'invalid', 
      helper:"clone",
      snap: "#drop_here td", 
      opacity: 0.7
    });
    $( "#drop_here td" ).droppable({
      // accept only from left div, 
      // this is necessary  to prevent clones duplicating inside droppable
      accept: '#left .draggable',
      drop: function( event, ui ) {
        // 4 append clone to droppable
        $( this ).append(
          // 1 clone draggable helper
          $(ui.helper).clone()

          // 2 make the clone draggable
          .draggable({
             containment:"#table",
            snap: "#drop_here td" 
          })
          // 3 make the clone resizable
          .resizable());

//HERE IS MY PROBLEM IN CODE
        $(".draggable").hover(function() {
    $(this).append("<div class='line'></div>");
}, function() {
    $(this).removeClass("line");
});
      }
    });
  });

但不行！

DEMO

Answer 1

第一个问题是你的css ,有;个

.line { 
 display:none;
 width: 5px; 
 height:200px;
 background: red;

}

然后对jquery修改如下：

$('.draggable').hover(function(){
    $(this).find('.line').show();
}, function() {
    $(this).find('.line').hide();
});

在您的标记位置，.line（仅一个）每after只.draggable，但不会hover或append 1}}每次hover .draggable创建大量.line s

时

jsfiddle：http://jsfiddle.net/steo/JB7jN/1/

Answer 2

你的“悬停”处理程序会从$（this）中删除该类 - 而不是从附加的子项中删除。

在悬停时动态创建元素可能是不好的做法，这些元素永远不会被删除。可能会逐渐用垃圾填写文件。

Answer 3

您必须将文档中的.hover（）绑定到这样：

$(document).ready(function(){
      $(".draggable").hover(function() {
          $(this).append("<div class='line'></div>");
      }, function() {
          $(this).children('.line').remove();
      });
});

Answer 4

如果您只想将行添加到克隆中，请将start属性添加到可拖动选项中，如下所示：

$( ".draggable" ).draggable({
  revert: 'invalid', 
  helper:"clone",
  snap: "#drop_here td", 
  opacity: 0.7,
  start: function(event, ui){
    var clone = $(ui.helper);
    if (clone.children('div.line').length == 0)
        clone.append("<div class='line'></div>");
  }
});

经过测试，它就像一个魅力......不要忘记删除这部分：

    $(".draggable").hover(function() {
         $(this).append("<div class='line'></div>");
    }, function() {
         $(this).removeClass("line");
    });

使用jquery在悬停时添加div

4 个答案: