如何使用JQuery在鼠标单击旁边放置div？
使用JQuery在鼠标单击旁边放置div的方法如下：
- 首先，确保你已经引入了JQuery库文件。可以通过以下方式引入：<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
- 在HTML中创建一个用于放置div的容器元素，例如：<div id="container"></div>
- 使用JQuery编写以下代码，实现在鼠标单击旁边放置div的功能：$(document).ready(function(){ $(document).on("click", function(event){ // 获取鼠标点击的位置 var x = event.pageX; var y = event.pageY; // 创建一个新的div元素 var newDiv = $("<div></div>").css({ "position": "absolute", "left": x + "px", "top": y + "px", "width": "100px", "height": "100px", "background-color": "red" }); // 将新的div元素添加到容器中 $("#container").append(newDiv); }); });
以上代码中，我们使用了JQuery的事件处理函数on()来监听文档的点击事件。当用户在文档中点击鼠标时，会触发该事件处理函数。在事件处理函数中，我们获取鼠标点击的位置，并创建一个新的div元素，并设置其样式为绝对定位，使其出现在鼠标点击的位置。最后，将新的div元素添加到容器中。
这样，当用户在文档中点击鼠标时，就会在鼠标点击的位置旁边放置一个红色的div。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
2回答
将<div>标签放在单击的位置
javascript、jquery、html、css
我一直在尝试将<div>元素定位在我单击的位置。
这是我想要定位的div
<main class="">
<div class="overlay"></div>
@Html.Raw(ViewBag.Breadcrumb)
<div class="split">
<div class="half">
<div class="section-head">
浏览 0提问于2016-07-01得票数 0
1回答
jQuery在mouseclick上创建div
jquery、click、jquery-animate
在我的网站上，我想要能够创建一个div当我点击我的鼠标，div应该创建旁边的鼠标点击。然后我想要能够动画这个div飞离屏幕底部。
到目前为止，我有这个jQuery代码，它只是在单击时显示一个div，但是我希望它在每次显示时都在屏幕上上下移动。有人能帮我一下吗。
$("#divId").hide();
$(".holder").click( function(event) {
$("#divId").show().css( {position:"absolute", top:event.pageY, left: event.
浏览 5提问于2013-10-28得票数 0
回答已采纳
2回答
如何使元素出现在javascript中鼠标单击的位置
javascript
我想从一个空白页开始，当用户(鼠标)单击页面中的任何位置时，会在该位置显示一个框。
这就是我到目前为止所做的，我隐藏了这个框，然后通过添加一个事件侦听器更改了样式，但是如何创建另一个允许用户单击任意位置的事件，出现方框，然后在另一个位置再次单击，然后在该位置出现另一个框。-仅使用香草Javascript
谢谢，下面是我的html/css代码：
<div id ="box"></div>
#box{
width:100px;
height:100px;
background-color: blue;
position: absol
浏览 0提问于2016-11-10得票数 0
回答已采纳
1回答
自定义拖动元素跳过
jquery、math、mouseevent、drag
显然，我用鼠标光标上的数学和元素偏移量做了一些简陋的事情，但我不知道是什么。为什么元素跳得这么快？目标是能够拖动元素，但我需要它保持相对于鼠标(IE而不是SNAP到光标)。此外，我实际上希望能够使用父元素(如果这有意义的话)拖动，如代码中所反映的那样。可以在父容器上“拖动”以移动目标。
此外，我意识到还有其他问题需要改进(比如拖出页面等)，但这个问题的目的是解决来回跳的问题。
let scaleX = 1;
let scaleY = 1;
let skewX = 0;
let skewY = 0;
let translateX = 0;
let translateY = 0;
let is
浏览 1提问于2021-01-23得票数 0
回答已采纳
1回答
JQuery选择器意外触发
javascript、jquery、jquery-ui
我一直在尝试学习jQuery以扩展我的能力，所以我尝试模仿jQuery UI的".draggable()“行为。spinet直接显示了这个问题，我不明白为什么当我点击#Box时会触发.mousedown事件，我如何才能让它只在点击#MyBox时触发？ 附言:这纯粹是为了理解jQuery的目的，我不打算在任何地方使用这段代码。 var down, x, y
$(document).ready(function(){
$("#Box").draggable()
$("#MyBox").mousedown(function(event){
浏览 2提问于2020-03-30得票数 2
回答已采纳
1回答
在另一个div中移动div。
javascript、html、css
我正在尝试开发一个简单的应用程序。
当我们将--小框--拖动到更大的框中时，更小的盒子应该移动到更大的框中。
但是，不能离开更大的盒子，，我知道怎么移动小盒子，但是我不知道怎么把它放在大盒子里。有人能帮帮我吗？
正如我前面提到的，我的代码正确地移动了小框，但是没有将它保存在更大的框中。
var guy=document.getElementById("guy");
var cont=document.getElementById("container");
var lastX,lastY; // Tracks the last observed mouse
浏览 0提问于2018-10-25得票数 0
2回答
如何检查鼠标光标是否超过某个x坐标？
javascript、html、css
我做错了什么？当我尝试使用它时，它会吐出错误：
无法读取未定义的属性“pageX”。
这里的目标是运行一次检查，看看鼠标光标是否被传递到某个x位置。
$( document ).on( "mousemove", function( event ) {
$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
var x = event.pageX;
if (x > 1200)
{
window.alert(
浏览 0提问于2018-09-10得票数 0
回答已采纳
1回答
如果img光标在div之外，如何防止跟随？
javascript、jquery、css
如果用户将光标移动到块#鼠标指针之外，它将在菜单和其他div下消失。我想让图像只跟随光标时，它是在块内的id #鼠标指针。
$(function (){
$(window).mousemove(function(event) {
$('#mouse-pointer').css({
'top' : event.pageY -100 + 'px',
'left' : event.pageX -100 + 'px'
});
}
浏览 1提问于2016-02-19得票数 1
1回答
即使它已经在这个相同的元素上盘旋，也要使鼠标在火焰上燃烧。
javascript、jquery、mouseevent、mouseover、onmouseover
我有一种奇怪的行为，在任何元素上悬停时，event.pageX & event.pageY在侦听over时都不会刷新其值。它似乎“卡住”，直到您mouseleave这个元素，并再次鼠标对这一个。复杂的理解，容易看到下面的例子。
下面的代码在mouseover上显示event.pageX & event.pageY值，如果您将svgs元素悬停，如果您将div向下悬停在下面。(如果您运行嵌入式代码段，请单击右侧的“完整页”按钮!)
问题是，如果你穿过绿色的圆圈，它会显示某些值。然后，如果你在这个圆圈里移动，值就不会刷新。您将需要从一个元素转到另一个元素，以看到值的增加/减少。div
浏览 4提问于2016-12-22得票数 3
回答已采纳
2回答
如何检测重叠元素下的单击？
javascript、jquery、html、css、iframe
我有两个HTML文档，b.html包含使用iframe的c.html。
在b.html上，我需要绘制一些DIV (在我的示例id=selector中)，它部分覆盖了c.html在iframe中可视化的内容。
我需要获得与DIV选择器下的鼠标坐标对应的DOM元素的ID。
目前，在document.elementFromPoint()中直接在c.html中使用可以部分工作，因为当鼠标在DIV选择器上时，我无法在c.html中识别下面的DOM元素(在本例中，DIV c)。
我需要知道：
是否可以使用document.elementFromPoint()或任何其他方法在另一个元素下选择元素？
浏览 5提问于2015-04-08得票数 3
回答已采纳
1回答
空格键的按键事件侦听器
javascript、ecmascript-5
我在做一个迷你项目，当我点击鼠标时，每次点击屏幕上都会出现无数的圆圈。我正在试着做同样的事情，然而，不同的是当空格键被按下来做同样的事情。
由于某些原因，我的代码不能工作，我甚至在控制台上记录日志，什么也看不到，我不明白为什么。如果能提供一些指导，我们将不胜感激。
下面是我的html：
<!DOCTYPE html>
<html>
<head>
<title>CircleMaker</title>
<link href="main.css" rel="stylesheet">
<
浏览 0提问于2018-07-26得票数 0
1回答
如果使用CSS格式，则Canvas标签不起作用
javascript、html5-canvas
我使用画布、HTML5标签和JavaScript创建了一个简单的web应用程序，它允许在按下鼠标时沿直线绘制。当我不使用任何CSS格式时，这可以很好地工作。但是，当我使用CSS格式时，这不能正常工作:线条被绘制到远离鼠标所在的位置。
context = document.getElementById('drawing').getContext("2d");
//below code to ensure compatibility with older browser by check if addEventListener is available or not
浏览 0提问于2015-11-15得票数 2
2回答
用鼠标移动一条垂直线，用两个高图集找到交点。
javascript、jquery、highcharts
一页里有两张线图。我正在用高级图表来绘制图表。
我想移动一条垂直线与鼠标移动，并想找出每一个图形的数据点，在垂直线相交的图形。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
&
浏览 3提问于2013-12-13得票数 0
回答已采纳
1回答
动态创建div时，子编号是错误的。
javascript、jquery、children
我有一个问题，我找不到任何解决办法。当我单击一个按钮时，它创建一个带有输入的div，并创建另一个作为子按钮的按钮。在第一次和第二次单击没有发生错误。但是在第三次单击错误时，happens.It会创建第三个div，但是它会将第一个div的子级乘以，而在第四个单击中，它会向第一个和第二个div中添加另一个子程序。我要它创造一个正常数量的div和儿童。
这是我的密码。试试看这个问题。
var secondContainer = $(".second-container");
var input1 = $('<input class="bot-section
浏览 2提问于2022-02-27得票数 1
2回答
鼠标相对于div的位置
javascript、jquery
我使用jquery ui进行拖放。我正在尝试获取鼠标相对于div的位置，以下是我的代码：
$( "#db_tables " ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var x = ui.position.left - ui.offset.left; // tired event.pageX - this.offsetLeft;
var y = ui
浏览 0提问于2010-09-30得票数 10
回答已采纳
1回答
在不同的浏览器、屏幕分辨率、设备等上，div的偏移量是否相同？
javascript、jquery、css
假设我在网页上有一个框，这是一个简单的使用div样式的border: 1px solid black;，其高度和宽度为200 of。
我有两个用户，一个是在笔记本电脑上使用谷歌铬，另一个是使用IPad，可能这些设备有不同的屏幕分辨率等等。
用户1点击在他的谷歌铬框的中心。然后，用户2点击他的IPad上完全相同的位置。
我希望在代码中确定用户是否都单击了相同的位置。我认为，如果我试图获得鼠标坐标，甚至top, left等，它们对于用户1和2将是不同的，即使它们都点击了框上完全相同的位置，因为它们的屏幕分辨率等等是不同的。
我使用了以下HTML：
Click anywhere in the box
浏览 1提问于2013-05-30得票数 3
回答已采纳
3回答
检索jQuery中的mousemove处理程序
javascript、jquery、jquery-events
是否有任何方式检索当前鼠标移动处理程序的选择在jQuery中？
按照标准的jQuery，通常的方法是简单地调用$('selector').mousemove()，但是我看到对于这些事件，它模拟事件而不是返回处理程序。
这个是可能的吗？
浏览 4提问于2014-07-23得票数 3
回答已采纳
1回答
如何检测鼠标水平移动(向左或向右移动)
javascript、jquery
请您看看，让我知道只有当鼠标向左或向右移动时，我才能检测到mousemove()吗？
基本上，现在发生的事情是jquery检测mousemove事件，即使鼠标从上到下或向下移动到顶部，但我需要禁用它，并检测鼠标水平移动的事件。
$( "#target" ).mousemove(function( event ) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
$( "#log" )
浏览 0提问于2016-01-06得票数 2
回答已采纳
3回答
鼠标单击将div放置在另一个div内。
javascript、jquery
通过单击按钮，我能够生成可拖放的div，然后将其放在另一个div(容器)中。通过单击按钮创建的div将自动放置在父(容器)div的左侧。然后，用户就有能力将其拖到所需的位置。是否有一种方法让用户生成新的div，然后让他们通过鼠标单击确定这个新div的位置？。
当用户确定位置并在容器中盘旋时，请提供一些临时指南，如下所示：
Jquery
$('#button').click(function (e) {
$('<div />', {
'class': 'draggable ui-widget-c
浏览 2提问于2014-08-27得票数 0
回答已采纳
7回答
将一个子容器拖出溢出的容器-y:滚动
html、css、drag-and-drop、overflow、clip
我有一个容器，里面有一个清单。可以用鼠标拖动列表项。
容器可滚动，可使用：
overflow-y: scroll;
通过设置此属性，Chrome自动将overflow-x属性设置为“auto”。如果我设置了overflow-x: visible，它就会被Chrome忽略。如果我设置了overflow-x: hidden，那么该项目显然是被裁剪的。
当我将列表项拖出容器的左侧或顶部边缘时，它将被裁剪到容器的边缘。如果我把它从右边或底部边缘拖拽出来，容器就会滚动以容纳它。我希望这个项目能够被拖动到容器之外，而不需要被裁剪，也不需要触发滚动。
既然容器必须设置为overflow-y: scroll，
浏览 6提问于2015-02-02得票数 10
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
