我想拖放上面的三角形以适合下面的三角形。当我没有定义目标width
框的大小height
或#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');
},
});
<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>
这里有冲突吗?谢谢!
似乎存在元素冲突。由于您有2个SVG元素,因此我认为您没有拖动适当的元素。我删除了第一个SVG,然后拖动按预期方式工作。
$(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>