我有以下腳本,可以調整影像的大小,但是,我無法拖動影像并改變其位置
<html>
<head>
<link rel="styleheet" href="home。 css" >
<script src="https://ajax. googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">< /script>
<script src="http://code. jquery.com/jquery-1.9.1.min.js">< /script>
<script src="http://code. jquery.com/ui/1.9.2/jquery-ui.js"></script>
< link rel="styleheet" type="text/css" href="http: //code. jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>/span>
</head>
<body>
<div class="row">
<div class="div1">
<h1> 關于我們 </h1>/span>
<p class="card-text">/span>
一般描述
</p>
<div id="dragableHelper"/span> style="display: inline-block">
<img id="image" src = "images/jimslogo2. png"/>
</div>
</div>/span>
<div class="div2">
<span class="dot">
<div>/span>
<div id="rotator"/span>> </div>>
</div>/span>
<p class="textScale">/span>
<b>特色產品 </b>/span>
</p>/span>
</span>
</div>/span>
</div>/span>
<script type="text/javascript">/span>
$(document).ready(function() {
$('#draggableHelper'/span>).draggable()。
$('#image').resizable()。
});
</script>>
</body>
</html>
我試圖拖動的圖片包含在 "行 "類div中自己的div標簽中。我不確定這是不是有效的
uj5u.com熱心網友回復:
你在dragable中的目的是什么,你需要為它定義選項
。<! DOCTYPE html>
<html>
<head>
<link rel="styleheet" href="home。 css" >
<link rel="styleheet" href="/code. jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel=" stylesheet" href="/resources/demos/style. css">
<script src="https://code. jquery.com/jquery-1.12.4.js"></script>
<script src="https://code. jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="div1">
<h1> 關于我們 </h1>/span>
<p class="card-text">/span>
一般描述
</p>
<div id="dragableHelper"/span>>
<img id="image" src = "images/jimslogo2. png"/>
</div>
</div>/span>
<div class="div2">
<span class="dot">
<div>/span>
<div id="rotator"/span>> </div>>
</div>/span>
<p class="textScale">/span>
<b>特色產品 </b>/span>
</p>/span>
</span>
</div>/span>
</div>/span>
<script type="text/javascript">/span>
$(document).ready(function() {
$('#draggableHelper'/span>).draggable()。
$('#image').resizable()。
});
</script>>
</body>
</html>
uj5u.com熱心網友回復:
用這兩個鏈接代替。
<script src="http://ajax. googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>/span>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui. min.js" type="text/javascript">< /script>
你可以在這里試試我的答案 https://jsfiddle.net/a68mdzes/
希望它能發揮作用:)
uj5u.com熱心網友回復:
你的腳本中似乎有兩個版本的jQuery(3.5.1 & 1.9.1)。你還使用了一個舊版本的jQuery UI(1.9.2)。最好是確保你使用的是最新的版本。
。$(document)。 ready(function() {
$('#draggableHelper').draggable()。
$('#image').resizable()。
});
< link rel="styleheet" href="/code. jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code. jquery.com/jquery-3.5.1.js"></script>
<script src="https://code. jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">/span>
<div class="div1">
<h1> 關于我們 </h1>/span>
<p class="card-text"/span>> 一般描述</p>>
<div id="dragableHelper"/span> style="display: inline-block">
<img id="image"/span> src="https://dummyimage. com/100x100/000/fff.png&text=IMAGE" />。
</div>
</div>/span>
<div class="div2">
<span class="dot">
<div>/span>
<div id="rotator"/span>> </div>>
</div>/span>
<p class="textScale">/span>
<b>特色產品 </b>/span>
</p>/span>
</span>
</div>/span>
</div>/span>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
上述測驗允許兩者按預期作業。你會注意到我只使用了一個版本的jQuery和jQuery UI.
。轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/319896.html
標籤:
上一篇:如何看待騰訊 2022 校招薪資,白菜總包 40w ?
下一篇:JQueryUI范圍滑塊價值

