使用“左”css 屬性拖動 div 元素

Question

我正在嘗試制作一個 css 漸變生成器，我需要制作一個帶有點的 slider 來控制線性漸變屬性。 我想知道如何將這些點移動到框內。

我嘗試使用dragstart、drag、dragend Jquery 功能，但我只能將其移動到一側並且不流暢。 請告訴我如何做到這一點。 提前致謝。

 .gradientChanger { width: 80%; height: 50px; position: relative; background-color: grey; border: 2px solid black; border-radius: 5px; }.gradientPointer { width: 12px; height: 130%; background: rgb(255, 255, 255); cursor: pointer; border-radius: 7px; border: 1px solid black; top: -8px; position: absolute; z-index: 10; }

 <div class="gradientChanger"> <div class="gradientPointer" style="left: 10%" id="pointer0"></div> <div class="gradientPointer" style="left: 30%" id="pointer1"></div> </div>

參考圖片來自https://cssgradient.io/

Answer 1

我希望這會根據你的需要有用

 $( function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 500, values: [ 75, 300 ] }); });

 #slider-range.ui-slider-handle { width: 12px; height: 130%; outline: 0; background: rgb(255, 255, 255); cursor: pointer; border-radius: 7px; border: 1px solid black; top: -8px; z-index: 10; transition: opacity.2s; } #slider-range.ui-slider-horizontal { top: 1em; left: 5%; width: 80%; height: 50px; border: none; background-color: grey; border: 2px solid black; border-radius: 5px; }

 <,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <title>jQuery UI Slider - Range slider</title> <link rel="stylesheet" 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 id="slider-range" ></div> </body> </html>

如果你想計算鈴聲，我只能這樣做，運氣好:)

 $( function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { $( "#amount" ).val(ui.values[ 0 ] + " - " + ui.values[ 1 ] ); } }); $( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 ) ); } );

 #slider-range.ui-slider-handle { width: 12px; height: 130%; outline: 0; background: rgb(255, 255, 255); cursor: pointer; border-radius: 7px; border: 1px solid black; top: -8px; z-index: 10; transition: opacity.2s; } #slider-range.ui-slider-horizontal { top: 1em; left: 5%; width: 80%; height: 50px; border: none; background-color: grey; border: 2px solid black; border-radius: 5px; } #amount { left: 5%; visibility: visible; width: 80%; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; to/* p: 100%; left: 50%; margin-left: -60px; */ }

 <,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <title>jQuery UI Slider - Range slider</title> <link rel="stylesheet" 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> <p> <input type="text" id="amount" readonly style="border;0: color;#f6931f: font-weight;bold;"> </p> <br/> <div id="slider-range"> </div> </body> </html>

使用“左”css 屬性拖動 div 元素

問題描述

1 個解決方案

解決方案1
1 已采納 2021-03-17 17:23:04

使用“左”css 屬性拖動 div 元素

問題描述

1 個解決方案

解決方案1 1 已采納 2021-03-17 17:23:04

解決方案1
1 已采納 2021-03-17 17:23:04