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

Posted 2023-05-08

【中文标题】Jquery UI 单击不适用于拖动的图像。当图像 > 1

【英文标题】：Jquery UI click not working on dragged images. When the images > 1

【发布时间】：2021-06-13 12:26:10

【问题描述】：

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

不是只是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/

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

【问题讨论】：

请创建minimal reproducible example

我已经做到了。试试看

请将所有内联样式移至 CSS 类。还缓存对 $('#img-'+image.id) 之类的引用并删除注释代码，当您执行此类操作时，代码将变得更加清晰，更易于阅读和理解。堆叠的解决方案是 CSS 修复，但其他人很难理解你所有写成内联样式的样式

【参考方案1】：

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

#canvas
  display: flex;

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