定义元素样式时禁用 .droppable() 吗？

Question

我想拖放上面的三角形以适应下面的三角形。 当我没有定义目标#droppable 框的大小width 或height 时，一切正常。

$("#draggable").draggable({
        revert: "invalid",
        stop: function(){
            var top0 = 150; left0 = 0;
            var top = Number($(this).css('top').split('px')[0]), left = Number($(this).css('left').split('px')[0]);
            var d = Math.sqrt((top0 - top)*(top0 - top) + (left0 - left)*(left0 - left));
            if(d < 30){
                $(this).css({'top': top0 + 'px', 'left': left0 + 'px'});
                $(this).addClass('placed');
            }
        }
    });
$("#droppable").droppable({
        over: function(){
            $(this).find(".target").css('fill','#F7F2D4');
        },
        out: function(){
            $(this).find(".target").css('fill','#F7DAD4');
        },
        deactivate: function(){
            $(this).find(".target").css('fill','#e5e5e5');
        },
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div style="height: 150px">
<div style="position: absolute"><span class="svgedit"><svg height="86" width="95" xmlns="http://www.w3.org/2000/svg"> <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> <g>

<path d="m0.75,84.74999l46,-84l46,84l-92,0z" fill="#bfbf00" id="svg_1" stroke="#000" stroke-width="1.5"></path> </g>  </svg></span></div>

<div id="draggable"><span class="svgedit"><svg height="86" width="95" xmlns="http://www.w3.org/2000/svg"> <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> <g>

<title></title>
<path d="m0.75,84.74999l46,-84l46,84l-92,0z" fill="#bfbf00" id="svg_1" stroke="#000" stroke-width="1.5"></path> </g> </svg></span></div>
</div>

<div id="droppable"><span class="svgedit"><svg height="86" width="95" xmlns="http://www.w3.org/2000/svg"> <g>
 <path class="target" d="m0.75,84.74999l46,-84l46,84l-92,0z" fill="#e5e5e5" id="svg_1" stroke="#7f7f7f" stroke-width="1.5"></path> </g>  </svg></span></div>

.droppable() 在所有事件over activate deactivate 被触发时被触发。否则，在定义#droppable 元素的样式时，.droppable() 不起作用，如下所示：

$("#draggable").draggable({
        revert: "invalid",
        stop: function(){
            var top0 = 150; left0 = 0;
            var top = Number($(this).css('top').split('px')[0]), left = Number($(this).css('left').split('px')[0]);
            var d = Math.sqrt((top0 - top)*(top0 - top) + (left0 - left)*(left0 - left));
            if(d < 30){
                $(this).css({'top': top0 + 'px', 'left': left0 + 'px'});
                $(this).addClass('placed');
            }
        }
    });
$("#droppable").droppable({
        over: function(){
            $(this).find(".target").css('fill','#F7F2D4');
        },
        out: function(){
            $(this).find(".target").css('fill','#F7DAD4');
        },
        deactivate: function(){
            $(this).find(".target").css('fill','#e5e5e5');
        },
    });

  #droppable{
    width:300px;
    height:300px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div style="height: 150px">
<div style="position: absolute"><span class="svgedit"><svg height="86" width="95" xmlns="http://www.w3.org/2000/svg"> <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> <g>

<path d="m0.75,84.74999l46,-84l46,84l-92,0z" fill="#bfbf00" id="svg_1" stroke="#000" stroke-width="1.5"></path> </g>  </svg></span></div>

<div id="draggable"><span class="svgedit"><svg height="86" width="95" xmlns="http://www.w3.org/2000/svg"> <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> <g>

<title></title>
<path d="m0.75,84.74999l46,-84l46,84l-92,0z" fill="#bfbf00" id="svg_1" stroke="#000" stroke-width="1.5"></path> </g> </svg></span></div>
</div>

<div id="droppable"><span class="svgedit"><svg height="86" width="95" xmlns="http://www.w3.org/2000/svg"> <g>
 <path class="target" d="m0.75,84.74999l46,-84l46,84l-92,0z" fill="#e5e5e5" id="svg_1" stroke="#7f7f7f" stroke-width="1.5"></path> </g>  </svg></span></div>

这里有冲突吗？谢谢！

Answer 1

似乎存在元素冲突。由于您有 2 个 SVG 元素，我认为您没有拖动正确的元素。我删除了第一个 SVG，然后 Drag 按预期工作。

$(function() {
  $("#draggable").draggable({
    helper: "clone",
    revert: "invalid"
  });
  $("#droppable").droppable({
    over: function() {
      console.log("Over");
      $(".target", this).css('fill', '#F7F2D4');
    },
    out: function() {
      console.log("Out");
      $(".target", this).css('fill', '#F7DAD4');
    },
    drop: function(e, ui) {
      var c = ui.draggable.clone("true");
      var i = $(".placed", this).length + 1;
      c.attr("id", "draggable-" + i).addClass("placed");
      var top0 = 150 + 8;
      var left0 = 0 + 8;
      var top = parseInt(ui.position.top),
        left = parseInt(ui.position.left);
      var d = Math.sqrt((top0 - top) * (top0 - top) + (left0 - left) * (left0 - left));
      console.log(top, left, d);
      if (d < 30) {
        c.css({
          'top': top0 + 'px',
          'left': left0 + 'px'
        });
      } else {
        c.css({
          'top': top + 'px',
          'left': left + 'px'
        });
      }
      c.css("position", "absolute").appendTo(this);
    }
  });
});

#droppable {
  width: 300px;
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div style="height: 150px">
  <div id="draggable">
    <span class="svgedit">
      <svg height="86" width="95" xmlns="http://www.w3.org/2000/svg">
        <g>
          <title></title>
          <path d="m0.75,84.74999l46,-84l46,84l-92,0z" fill="#bfbf00" id="svg_1" stroke="#000" stroke-width="1.5"></path>
        </g>
      </svg>
    </span>
  </div>
</div>

<div id="droppable">
  <span class="svgedit">
    <svg height="86" width="95" xmlns="http://www.w3.org/2000/svg">
      <g>
        <path class="target" d="m0.75,84.74999l46,-84l46,84l-92,0z" fill="#e5e5e5" id="svg_1" stroke="#7f7f7f" stroke-width="1.5"></path>
      </g>
    </svg>
  </span>
</div>