Jquery UI 单击不适用于拖动的图像。当图像 > 1

Question

那里的代码正在运行，但问题是当我添加图像时。我可以点击它。但是当我添加下一个时，我只能单击新的。如果我想点击另一个我需要拖动它。然后我只能点击我拖动的那个。

不是只是div叫canvas。

我做错了什么？

function newImage(image){
var img = new Image()
var imgWidth = 0
var imgHeight = 0
img.onload = function (){
    imgWidth = img.naturalWidth
    console.log(img.naturalWidth)
    imgHeight = img.naturalHeight
    console.log(img.naturalHeight)
}
img.src = image.url
    $('#canvas').append('' +

            '<div id="img-'+image.id+'" class="position-absolute selectable position-relative" style="top: 0px; left: 0px; width: 0px; height: 0px; outline-offset: -2px;">' +
                '<img class="" id="realImg-'+image.id+'" src="'+image.url+'" style="left: 0px; top: 0px; width: 100%; height: 100%; mix-blend-mode: unset;">' +// to ma .nameide i .speed
            '</div>'
    )
    setInterval(function(){
        $('#img-'+image.id).css('width', imgWidth)
        $('#realImg-'+image.id).css('width', imgWidth)
        $('#img-'+image.id).css('height', imgHeight)
        $('#realImg-'+image.id).css('height', imgHeight)
    }, 100)
        $('#img-'+image.id).draggable({
            start: function( event, ui ) {
                $('.selectable').css('outline', '0px solid gold')
                console.log('reselect')
                activeImg = "#realImg-"+image.id
                activeImgId = image.id
                //$('#img-'+activeImgId).css('outline', '2px dashed white')
                $('#img-'+activeImgId).addClass('border-blend')
                console.log('selected')
            }
        }).on('mouseup', function (){
            if ( $(this).is('.ui-draggable-dragging') ) {
                return;
            }
            
                    activeImg = "#realImg-"+image.id
                    //$('#img-'+activeImgId).css('outline', '2px dashed white')
                    $('#img-'+activeImgId).addClass('border-blend')
                    //$('#realImg-'+image.id).css('marginLeft', '-2px')
                    //$('#realImg-'+image.id).css('marginTop', '-2px')
                    console.log('selected')

        })
}

这里你可以看到一个活生生的例子：https://jsfiddle.net/Lyd291jr/1/

顺便说一句，停止拖动后取消选择。这也是个问题。

Answer 1

您可以将display: flex 申请为#canvas：

#canvas{
  display: flex;
}

并删除硬编码的内联绝对定位，height:0; 等，如下所示：https://jsfiddle.net/r0q1agwb/