Question

有我的代码：

<!doctype html>
<html lang="en">
<head>
    <title> Mrb. :) </title>
    <style>
        h1{
            text-align: center;
        }
        #finishImage { 
            width:64px; 
            height:64px; 
            }
        #palette{
            position: absolute; 
            height: 535px; 
            border: 1px solid orangered; 
            top: 10px; 
            left: 10px; 
            right: 1125px;
        }
        #content{
            position: absolute; 
            height: 400px; 
            border: 1px solid black; 
            top: 135px; 
            left: 250px; 
            right: 10px;
        }
        #header{
            position: absolute;
            height: 115px;
            border: 1px solid orange;
            left: 250px;
            right: 10px;
        }
    </style>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>

<body>   
    <div id="parent">
        <div id="header">
            <h1>HEADER</h1>
        </div>

        <div id="palette">
            <h1>PALETTE</h1>
            <hr>
                <div class="tbutton"><img id="finishImage" src="finish.png" /></div>
        </div>
        <div id="content">
    </script> 
            <script type="text/javascript">
                $("#finishImage").draggable({ 
                    helper: "clone" 
                    });

                $("#content").droppable({                
                    drop: function(event, ui) {
                        $("#content").append("<img id='finishImage' src='as.jpg'/>");
                    }
                });
            </script>
        </div>
    </div>
</body>
</html>

我正在做Drag＆amp;从div pallette降至div content。一切都很好但是。我想做这个鼠标位置。像窗口构建器。我的代码总是丢弃位置x：0 y：0像这样：

我该怎么做“放下鼠标位置”。

Answer 1

我把它添加到你的JS

$("#content").droppable({                
                drop: function(event, ui) {
                  var pos = $("#content").position()
                  $("#content").append("<img id='finishImage' src='as.jpg' style='left: "+(event.pageX-pos.left)+"px; top: "+(event.pageY-pos.top)+"px'/>");
                }
              });

这是你的CSS

#content #finishImage{
 position :absolute
}

我添加了一个顶部和左侧的样式属性，当它添加时，从鼠标位置（pageX/pageY）判断并计算Div的位置（position.left/.top）

带有可移动物体的

Heres a codePen

Answer 2

你好几个星期前写的Jsfiddle简单代码。

我希望它能解决你的问题。

$('.startEventClass').draggable({
  helper: "clone",
});

$('.userTaskClass').draggable({
  helper: "clone",
});

$('.endEventClass').draggable({
  helper: "clone",
});

$('#diagramZone').droppable({
  accept: ".startEventClass, .userTaskClass, .endEventClass",
  drop: function(e, ui) {
    dragE1 = ui.helper.clone();
    dragE1.draggable({
      containment: "#diagramZone",
    });
    $(dragE1).removeClass("startEventClass");
    $(dragE1).addClass("startEventClass");
    if (ui.draggable[0].id) {
      dragE1.appendTo('#diagramZone');
    }
  }
})

.startEventClass {
  width: 40px;
  height: 40px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 30px;
  border: solid 2px;
  border-radius: 50px;
}

.userTaskClass {
  width: 120px;
  height: 60px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 30px;
  border: solid 2px;
  border-radius: 5px;
}

.endEventClass {
  width: 40px;
  height: 40px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 30px;
  border: solid 5px;
  border-radius: 50px;
}

#diagramZone {
  height: 200px;
  border: solid 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="startEvent" class="startEventClass">

</div>

<div id="userTask" class="userTaskClass"></div>

<div id="endEvent" class="endEventClass"></div>




<div id="diagramZone" class="col-md-8" id="diagramZone">
</div>

拖拽用Jquery删除

2 个答案: