1

我构建了一个类似“trip planner”的项目，但我需要在我克隆的 div 对象上添加一条带有 css 的左边框垂直线：

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

所以是这样的（你可以在悬停时看到一条垂直线）

我试图用代码做到这一点：

$(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");
});
      }
    });
  });

但不工作！

演示

4

4 回答 4

2

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

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

然后对于这样的jquery修改：

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

在您的标记中放置一个.line（只有一个）只是afterevery .draggable，但不是 onhover或者它会在append您每次创建大量s时hover.draggable.line

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

于 2013-07-14T10:08:32.513 回答
1

您必须像这样在准备好的文档中绑定 .hover() ：

$(document).ready(function(){
      $(".draggable").hover(function() {
          $(this).append("<div class='line'></div>");
      }, function() {
          $(this).children('.line').remove();
      });
});
于 2013-07-14T10:09:20.297 回答
0

您的“悬停”处理程序从 $(this) 中删除了该类 - 而不是从附加的子项中删除。

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

于 2013-07-14T10:07:36.967 回答
0

如果您只想将行添加到克隆中，请将 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");
    });
于 2013-07-14T10:52:26.980 回答