ドラッグオーバーしたときにテキストの値を変更する方法についてはブレーンストーミングしています。基本的に、左にドラッグすると値が減少します。右にドラッグすると値が大きくなります。ドラッグの変更値を実装する（Photoshopの場合と同じように）
この機能は、Adobe製品に実装されています。この画像をチェックしてください：
http://i.imgur.com/9QeoUNx.png
注ドラッグにのみ値が変化することを。どのような方法でも要素を移動しないので、JQueryのUIドラッグ可能なオプションがないようです。
これは、スターター（ほとんど空）テンプレートです：
https://codepen.io/anon/pen/owadRe
<div class="drag">123</div>
.drag{
cursor: ew-resize;
}
どのような機能を作成しますか？
Googleの場合はこれを行うプラグインがありますが、実際にクリックされた要素に対してマウスのx位置を取得してからその距離（またはその距離の何らかの変換）で値を更新するだけです。
以下は、jqueryを使用した非常に洗練された簡単な例です。
$(".drag").on('mousedown', e => {
// get initial value
let val = parseInt($('.drag').text());
$('body, .drag').toggleClass('dragging');
// check mousemove
$('body').on('mousemove', e => {
let xinit = $('.drag').offset().left; // element x position
let xfin = e.pageX; // mouse x position
let dVal = Math.floor(val + (xfin - xinit));
$('.drag').text(dVal);
});
// remove mousemove when done clicking
$('body').on('mouseup', e => {
$('body, .drag').toggleClass('dragging');
$('body').off('mousemove');
})
})body, html{
width : 100%;
height : 100%;
display : flex;
align-items : center;
justify-content : center;
background-color : yellow;
}
body.dragging{
cursor : ew-resize;
}
.drag {
cursor: ew-resize;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none
}<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="drag">123</div>
</body>