使用“左”css 属性拖动 div 元素

Question

I am trying to make a css gradient generator and I need to make a slider with points to control the linear-gradient property.我正在尝试制作一个 css 渐变生成器，我需要制作一个带有点的 slider 来控制线性渐变属性。 I would like to know how to move the points in such a way they are within the box.我想知道如何将这些点移动到框内。

I tried using the dragstart, drag, dragend Jquery functions but I can only move it to one side and it's not smooth.我尝试使用dragstart、drag、dragend Jquery 功能，但我只能将其移动到一侧并且不流畅。 Please tell me how to do this.请告诉我如何做到这一点。 Thanks in advance.提前致谢。

JS Fiddle demo JS 小提琴演示

 .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>

Reference Image from https://cssgradient.io/参考图片来自https://cssgradient.io/

Answer 1

i hope this will useful acording youre needs我希望这会根据你的需要有用

 $( 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>

And if you want to count the rang, i only can do this, get lucky:)如果你想计算铃声，我只能这样做，运气好:)

 $( 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