Javascript 拖动排序后鼠标向上回调不工作

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

我需要在dragsort之后手动单击图片以更新$（'#pic'）。val（）如何跳过手动单击？或者这是一种自动点击“li”的方式

我试过ul.children（'li'）.first（）.click（），但也不起作用

html

上传


book.png


a1.png


1804161714530.jpg

js

$（文档）.ready（函数（）{
$（'.sortablelist'）.dragsort({
dragSelectorExclude:'input，textarea，a[href]，i，em'，
拖拉中间人：是的，
占位符模板：“
正在移动…
”
});
$（'.sortablelist li'）.mouseup（函数（）{
ul=$（this.parent（）；
开关_输入_值=“”；
ul.find（'li'）。每个（函数（）{
picValue=$（this.children（'h5'）.html（）；
如果（！！picValue）{
开关_输入_值+=picValue+'，'；
}
}).promise（）.done（函数（））{
//ul.children（'li'）.first（）.click（）；//也不工作
输入id=ul.attr（'id'）。替换（'v_u'，''）；
$（'#'+input_id）.val（切换的输入值）；
控制台日志（开关输入值）；
});
});
});

可能是您正在寻找的东西。您无需触发

单击

，也无需将

单击

事件绑定到

$（'.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(','));

}

$（'.sortablelist'）.dragsort({
dragSelectorExclude:'input，textarea，a[href]，i，em'，
拖拉中间人：是的，
占位符模板：“
移动…
”，
dragEnd:function（）{
getData（）；
}
});
函数getData（）{
var listName=[]；
$（'.sortablelist'）。查找（'li'）。每个（函数（）{
log（$（this.find（'h5'）.html（））；
listName.push（$（this.find（'h5'）.html（））；
});
$（'#pic'）.val（listName.join（'，'）；
}

看到小提琴了吗

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

      });

    });
});

$('.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(','));

}