使用简单的技巧创建可拖动的线

Question

我有这个任务，当我按下加号按钮值增加等时，按照draggable这样创建img行。 如果你知道这样的插件请告诉我如何创建这个脚本非常容易请给我链接 感谢您的帮助：）

Answer 1

这是使用jQuery UI解决问题的简单方法（小提琴：http://jsfiddle.net/rz12wbcL/）

＆＃13;

＆＃13;

$(function() {
    var btnDec = $('.dec');
    var btnInc = $('.inc');
      
    var slider = $( "#slider" ).slider({
        min: 0,
        max: 30,
        step: 5,
        range: "min",
        value: 0,
        slide: function( event, ui ) {
            console.log(ui.value);
            $('#slider_value').val(ui.value);
        }
    });
    btnInc.click(function () { slider.slider('value', slider.slider('value') + 5 ); $('#slider_value').val(slider.slider('value')); });
    btnDec.click(function () { slider.slider('value', slider.slider('value') - 5 ); $('#slider_value').val(slider.slider('value')); });
});

＆＃13;

#slider_container * {
    float: left;
}
#slider {
    margin-left: 20px;
    margin-right: 20px;
}
input {
    width: 20px;
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<div id="slider_container">
    <button class="dec">-</button>
    <div id='slider' style='width: 100px;'></div>
    <input type="text" id="slider_value" value="0" />
    <button class="inc">+</button>
</div>

＆＃13;

＆＃13;

＆＃13;