jquery UI图像可以调整大小，但不能拖动？
jQuery UI是一个基于jQuery的用户界面库，提供了丰富的可视化组件和交互效果。其中，UI图像组件可以通过调整大小来改变图像的尺寸，但默认情况下是不支持拖动的。
要实现拖动功能，可以使用jQuery UI的拖动组件（Draggable）。拖动组件可以使元素可拖动，并提供了丰富的配置选项和事件回调函数，以满足不同的需求。
以下是一个示例代码，演示了如何使用jQuery UI的拖动组件实现图像的拖动功能：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#draggable {
width: 150px;
height: 150px;
background: #ccc;
position: relative;
}
</style>
<script>
$(function() {
$("#draggable").draggable();
});
</script>
</head>
<body>
<div id="draggable">
<img src="image.jpg" alt="可拖动的图像">
</div>
</body>
</html>在上述代码中，我们引入了jQuery和jQuery UI的库文件，并创建了一个可拖动的<div>元素，其中包含一个图像。通过调用draggable()方法，将该元素设置为可拖动。你可以根据实际需求修改元素的样式和配置选项。
关于jQuery UI的拖动组件的更多详细信息，你可以参考腾讯云的相关文档和示例代码：
请注意，以上答案仅供参考，具体的实现方式可能因个人需求和环境而异。
相关·内容
我需要用x轴和y轴翻转图像，我已经使用Jquery UI来调整大小和旋转。但不能翻转图像。我看了很多插件，使翻转图像，但这些都是自动翻转与一次点击或任何其他事件。但我需要处理用户定义的位置与手柄。{"width":"100px","height":"100px"}).resizable({handles:'ne,se,nw,sw'}).
浏览 3提问于2016-03-21得票数 0
3回答
我有以下脚本，它允许我调整图像的大小，但是，我不能拖动图像并更改其位置 <!/3.5.1/jquery.min.js"></script>
浏览 22提问于2021-09-13得票数 0
2回答
我编写了一个用jquery进行图像拖动和调整大小的代码。我可以拖动图像，但我无法进行图像大小调整，.PLease帮助我在调整大小时犯了什么错误。我在下面写了我的代码。} height: 200px;}
<link rel="stylesheet" hr
浏览 3提问于2016-10-24得票数 0
回答已采纳
1回答
我的图像是旋转后拖动，但当drops.this是图像拖放的代码时，我不能第一次拖动图像。“dhtmlgoodies_xpPane li .rotatable”可以拖动这个图像克隆并拖放到“工作区”上。我不能一次又一次拖拽图像克隆。但是克隆人在旋转和调整大小后是可拖动的。这是我的问题..。",
h
浏览 5提问于2011-03-02得票数 2
1回答
" style="z-index: 90;"></div>
所以基本上它是一个div中的图像，它是可拖动和可调整大小的。但是当我加载它的时候，我看到了要调整div大小的图像，但我不能拖动或调整图像的大小。bord").load("/media/moodboards/1.txt
浏览 0提问于2013-03-22得票数 0
回答已采纳
1回答
我希望有一个图像是可拖动和可调整大小(从所有手柄)，但当图像是从一个左手柄调整大小时，当图像被拖动时，容器不再被尊重(例如:图像可以从容器中取出)。为什么会发生这种情况，我能做些什么？<head> <link rel="sty
浏览 1提问于2013-12-09得票数 1
我正在使用Jquery UI来拖放图像和调整图像大小。我正在调整div中的图像大小，并拖动div来解决Jquery UI中的错误，如果有人拖动并调整Div的话。如何找到调整大小的图片的div ID？resizable({ handles:'n,e,s,w,ne,se,nw,sw' , max
浏览 1提问于2011-09-12得票数 0
回答已采纳
2回答
我这里有一个小问题，也许我可以找到一个在过去处理过这个问题的人。我使用的是可调整大小和可拖动的jQuery ui。这是一个动态网址：谢谢
浏览 2提问于2014-05-27得票数 2
我正在使用jQuery UI的可调整大小函数来调整包含图像的div的大小。在初始页面加载时，div包含someimage.png，并且使用下面的代码可以很好地调整大小。手柄出现在右下角，我可以单击并拖动它来调整div的大小。jQuery("#imgdiv").resizable();
<div i
浏览 2提问于2010-02-25得票数 4
回答已采纳
我使用的是宽高比设置为16/9的jQuery ui可调整大小。", grid: 1, }); 我希望能够拖动可调整大小的元素的全宽度来匹配容器，但如果永远不能完全到达它，请参
浏览 9提问于2021-06-28得票数 1
回答已采纳
1回答
我尝试在jquery中使用"append“添加对象。但是在看到/附加了可放入div中的对象之后。我拖不动它。可以拖动已在灰色区域中的图像并调整其大小。当拖动到灰色区域时，左下角区域中的图像将添加到那里，但不能拖动。
我甚至尝试将ui-draggable类添加到需要拖动的元素中。
浏览 1提问于2012-02-11得票数 0
我有一个带有几个div元素的网页，这些元素在jquery ui库中是可调整大小和可拖动的。$('#myDiv').draggable({ containment: "parent" }).resizable({ aspectRatio: true});
拖动和调整大小可以很好地工作，但我希望div可以调整大小，以便在调整窗口
浏览 0提问于2013-09-28得票数 1
我正在尝试使用Rmagick来组合两幅图像。ui.size"width"I和ui.size使用Ajax将这些数据发送到Rails服务器。下一步我使用Rmagick resize_to_fit重新调整<
浏览 5提问于2011-09-24得票数 0
回答已采纳
1回答
大家好，我有一个网站，我在一个div上传在Ajax中的图像，这个图像必须是可调整大小和拖动。问题是，如果我调整它的大小，工作，如果我拖动它似乎有一个溢出:隐藏，因为我拖动左图像消失后，它的限制。我看过html代码，有如果我在样式表中放入： over
浏览 0提问于2013-05-14得票数 0
回答已采纳
1回答
我有一个div，它可以在其中调整大小，但我不能将可拖动元素拖动到新的边界中。这是因为在添加draggable元素时设置的容器。每次拖动元素时，都需要更新包含边界。<div class="parent"> </div> $(".drag"
浏览 18提问于2021-02-16得票数 0
1回答
我试图上传一个图像，然后显示在屏幕上，而它是可拖和大小。我将jquery用于可拖动和可调整大小的函数。问题是，可拖动的函数可以工作，但是可调整大小的函数会破坏一些东西，并且上传的图像不会出现。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery&#x
浏览 3提问于2020-02-07得票数 1
回答已采纳
我在这里有一个js小提琴- -与我制作的contentEditable的DIV，其中包含一个图像。</div>
我注意到，对于火狐，contentEditable允许用户点击图片来调出它的句柄，这允许调整图片的大小。或者，在单击图像后，可以将其拖动到容器中的另一个位置，如果在拖动的同时按住can键，则会创建该图像的副本，因此现在DIV中有两个图像。我需要将DIV设置为contentEditable，但我不希望对
浏览 5提问于2013-07-26得票数 2
我在我的页面上有一些div，可以使用jQuery UI调整大小和拖动。当我在这些div上调用html()时，我得到的不仅是div的内容，还有一些由jQuery UI在我使它们可调整大小时插入的额外内容：<div
浏览 1提问于2011-01-15得票数 0
回答已采纳
我正在尝试让一个div (里面有一个图像)在Angular2/4中是可拖动和可调整大小的。到目前为止，我成功地用"angular2- draggable“使它可拖动，但我找不到一个允许我调整div大小的模块/指令。谢谢。
浏览 3提问于2017-11-26得票数 0
下面的例子显示你可以垂直和水平地调整大小，这是我想要的，但你也可以拖动角框来调整大小，这不是我想要的。有没有一种方法可以移除这个框，使其只能通过拖动容器的边缘来调整大小？ $( "#resizable" ).resizable(); <script src="https://cdnjs.cloudflare.com/
浏览 10提问于2020-12-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
