如何解决设置元素可以拖动的位置
我有一个 jquery 函数，它允许元素可拖动和调整大小，并且工作正常。我想添加的是设置一个位置，在该位置元素可以拖动和调整大小。更具体地说，我想让我的元素在我的代码中的 2 行（v1 和 vh）的空间之间拖动。有没有办法实现这一目标？任何帮助表示赞赏。提前致谢。
$(".box").mouseup(function () {
$(this).find('iframe').fadeIn('slow');
}).mousedown(function () {
$(this).find('iframe').hide();
});
$(function () {
$(".box")
.resizable()
.draggable();
});.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4{
color: white;
font-size: 20px;
text-align:center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 100%;
overflow: hidden;
}
.vh {
width: 100%;
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 100%;
overflow: hidden;
}<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
</head>
<body>
<div class="box">
<h4>box</h4>
</div>
<div class="vl">
</div>
<div class="vh">
</div>
</body>
</html>
解决方法
draggable() jQueryUI 组件有一个 containment 参数。它的一个签名允许您提供 4 个坐标，这些坐标等于可拖动元素应限制到的边界框。
要计算此值，您可以分别检索垂直线和水平线的 left 和 top，减去 .box 的宽度/高度。试试这个：
jQuery($ => {
let $box = $('.box');
let $vl = $('.vl');
let $vh = $('.vh');
$box
.resizable()
.draggable({
containment: [
8,// default body padding,amend as necessary
8,amend as necessary
Math.ceil(parseFloat($vl.css('left'))) - Math.floor(parseFloat($box.width())),Math.ceil(parseFloat($vh.css('top'))) - Math.floor(parseFloat($box.height()))
]
});
});.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4 {
color: white;
font-size: 20px;
text-align: center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 90%;
overflow: hidden;
}
.vh {
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 95%;
overflow: hidden;
}<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<div class="box">
<h4>box</h4>
</div>
<div class="vl"></div>
<div class="vh"></div>一种方法是将盒子包裹在适合您所需区域的容器中并使用 <?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use \GuzzleHttp\Client;
use Illuminate\Http\Client\Response;
use ArrayAccess;
class ApiController extends Controller
{
function api()
{
$barcode = 8710496976575;
$response = Http::get('https://api.barcodespider.com/v1/lookup?token=YOUT_TOKEN&upc=' . $barcode;);
dd($response->json());
}}
array:3 [▼
"item_response" => array:3 [▼
"code" => 200
"status" => "OK"
"message" => "Data returned"
]
"item_attributes" => array:16 [▼
"title" => "De Ruijter Fruit Sprinkles (Vruchten Hagel),400 Gr (14.1 Oz),1 Box"
"upc" => "8710496976575"
"ean" => "08710496976575"
"parent_category" => "Grocery"
"category" => "Grocery"
"brand" => "De Ruijter"
"model" => ""
"mpn" => "RUI_HAGEL_FRUIT_400"
"manufacturer" => "De Ruijter"
"publisher" => "De Ruijter"
"asin" => "B0044KJN1O"
"color" => ""
"size" => "12.8 Ounce"
"weight" => "1 Pounds"
"image" => "https://images.barcodespider.com/upcimage/8710496976575.jpg"
"description" => ""
]
"Stores" => array:1 [▼
0 => array:7 [▶]
]
]
dd($response->json("item_attributes[0]"));
containment: "parent" 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。