javascript - 拖动排序后鼠标向上回调不起作用

Question

我正在尝试在图片拖动后更新输入框的值。下面是fiddle和代码。

我需要在拖排序后手动单击图片来更新 $('#pic').val() 如何跳过手动单击？或者这是自动点击“li”的一种方式？

我尝试过 ul.children('li').first().click() 但它也不起作用。

fiddle

html

<div class="mediaset" data-param="{filter: 'image', batch: 1}">
    <input type="hidden" name="media" data-param="{type: 'media'}">
    <div class="topside"> 
        <button type="button" class="btn icon-image green label" onclick="getElementById('inputfile_pic').click();">UPLOAD</button>
        <input type="file" class="imagesUpload" data-value="pic" multiple="" id="inputfile_pic" style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;">
        <input type="hidden" name="pic" id="pic" value="book.png,a1.png,1804161714530.jpg,">
    </div>
    <ul class="items sortablelist" id="v_pic" data-listidx="0">
        <li id="book" style="border: 1px solid rgb(219, 224, 226); width: 150px; text-align: center; list-style-type: none; cursor: pointer;" data-itemidx="0">
            <h5>book.png</h5>
            <img src="../timthumb.php?src=e30001/data2/pic/book.png&amp;h=120&amp;w=120" title="book.png" alt="book.png" id="book_img" onclick="openBigPic('/e30001/data2/pic/book.png')">
            <div style="text-align:center;">

                <a href="#1" title="delee" class="delPic" data-value="e30001/data2/pic/book.png" data-guid="1" style="padding-right:5px;"><i class="fa fa-times"></i></a>

                <a href="#1" title="zoom in" onclick="openBigPic('/e30001/data2/pic/book.png')" style="padding-right:5px;"><i class="fa fa-search-plus"></i></a>

            </div>
        </li>
        <li id="a1" style="border: 1px solid rgb(219, 224, 226); width: 150px; text-align: center; list-style-type: none; cursor: pointer;" data-itemidx="1">
            <h5>a1.png</h5>
            <img src="../timthumb.php?src=e30001/data2/pic/a1.png&amp;h=120&amp;w=120" title="a1.png" alt="a1.png" id="a1_img" onclick="openBigPic('/e30001/data2/pic/a1.png')" style="cursor: move;">
            <div style="text-align:center;">

                <a href="#1" title="delee" class="delPic" data-value="e30001/data2/pic/a1.png" data-guid="1" style="padding-right:5px;"><i class="fa fa-times"></i></a>

                <a href="#1" title="zoom in" onclick="openBigPic('/e30001/data2/pic/a1.png')" style="padding-right:5px;"><i class="fa fa-search-plus"></i></a>

            </div>
        </li>
        <li id="1804161714530" style="border: 1px solid rgb(219, 224, 226); width: 150px; text-align: center; list-style-type: none; cursor: pointer;" data-itemidx="2">
            <h5>1804161714530.jpg</h5>
            <img src="../timthumb.php?src=e30001/data2/pic/1804161714530.jpg&amp;h=120&amp;w=120" title="1804161714530.jpg" alt="1804161714530.jpg" id="1804161714530_img" onclick="openBigPic('/e30001/data2/pic/1804161714530.jpg')">
            <div style="text-align:center;">

                <a href="#1" title="delee" class="delPic" data-value="e30001/data2/pic/1804161714530.jpg" data-guid="1" style="padding-right:5px;"><i class="fa fa-times"></i></a>

                <a href="#1" title="zoom in" onclick="openBigPic('/e30001/data2/pic/1804161714530.jpg')" style="padding-right:5px;"><i class="fa fa-search-plus"></i></a>

            </div>
        </li>
    </ul>
</div>

js

$(document).ready(function(){
    $('.sortablelist').dragsort({
      dragSelectorExclude: 'input, textarea, a[href] , i , em',
      dragBetween: true,
      placeHolderTemplate: '<li style="font-size:18px;"><div style="padding-top:50px;">moving...</div></li>'
    });

    $('.sortablelist li').mouseup(function(){
      ul = $(this).parent();

      switched_input_value = '';
      ul.find('li').each(function(){
        picValue = $(this).children('h5').html();
        if(!!picValue) {
          switched_input_value += picValue+',';
        }
      }).promise().done(function(){
        //ul.children('li').first().click();//not working either
        input_id = ul.attr('id').replace('v_','');
        $('#'+input_id).val(switched_input_value);

        console.log(switched_input_value);

      });

    });
});

Answer 1

可能是您正在寻找的东西。您不需要触发 click 也不需要将 click 事件绑定(bind)到 $('.sortablelist li')，只需使用 dragEnd 事件

$('.sortablelist').dragsort({
      dragSelectorExclude: 'input, textarea, a[href] , i , em',
      dragBetween: true,
      placeHolderTemplate: '<li style="font-size:18px;"><div style="padding-top:50px;">moving...</div></li>',
      dragEnd: function() {
         getData();
      }
    });

function getData() {
    var listName = [];
    $('.sortablelist').find('li').each(function() {
        console.log($(this).find('h5').html());
        listName.push($(this).find('h5').html());
    });
    $('#pic').val(listName.join(','));

}

参见 fiddle https://jsfiddle.net/3a5q4mhy/50/