Question

我试图弄清楚如何使用jquery获取在拖放功能中选择的图像的名称。

为此，我使用以下代码：

$(document).ready(function () {

    var x = null;

    //Make element draggable
    $(".drag").draggable({

        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit',
        stack: '.drag',
        revert: "invalid"


    });

            $("#droppable").droppable({



                    drop: function (e, ui) {

                    var srcc=$("#droppable").find('img').attr('src');
                    alert(srcc);    




                    if ($(ui.draggable)[0].id != "") {
                        x = ui.helper.clone();
                        ui.helper.remove();




                    x.draggable({

                        //helper: 'original',
                        containment: '#droppable',
                        tolerance: 'fit',
                        stack: '.drag'



                    });

                    x.resizable({

                      animate: true,
                      //aspectRatio: 16 / 9,

                      helper: "ui-resizable-helper",
                      handles: "n, e, s, w, nw, ne, sw,se"

                    });
                    x.appendTo('#droppable');

                }

                }

            });

});

请注意这一行：

            var srcc=$("#droppable").find('img').attr('src');
            alert(srcc);

问题是，在丢弃时，我无法获得所选图像/ div的名称！

P.S。按图像名称，我的意思是图像的实际网址：

示例：images/image_name.jpg

我已经创建了一个jsfiddle来进一步解释这个问题。

请将图像拖放到下面的框中，并记下alert();消息。

的jsfiddle：

http://jsfiddle.net/7s1w4jgq/

Answer 1

取代 $（“＃droppable”），而不是 ui.draggable

var srcc=ui.draggable.find('img').attr('src');
alert(srcc);

它会起作用。

Answer 2

您也可以从ui.helper获取它，因为您使用的是helper: 'clone'：

var srcc = ui.helper.find("img").attr("src")
alert(srcc);

Answer 3

或者您可以使用：

e.srcElement.currentSrc

Answer 4

将ui.draggable称为选择器而不是类名

var srcc = $(ui.draggable).find('img').attr('src');
    alert(srcc);

问题在于您没有将元素绑定到事件。

Fiddle

jQuery：通过拖放获取所选图像的名称？

4 个答案: