Question

我有多个可拖动项目和一个可放置区域。在这个可放置的区域，我放置了一个图像。在拖动其中一个元素时，我想让这个图像在它反转时淡入淡出。

我完成了这一点，但我怀疑这是最干净/最好的方法。

HTML

<div id="divwrap">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>
<div id="droparea">
    <div id="imagetoshow"></div>
</div>

JS

$("#div1").draggable({
    revert: true,
    start: function (event, ui) {
        $("#imagetoshow").fadeIn();
    },
    stop: function (event, ui) {
        $("#imagetoshow").hide();
    }
});

$("#div2").draggable({
    revert: true,
    start: function (event, ui) {
        $("#imagetoshow").fadeIn();
    },
    stop: function (event, ui) {
        $("#imagetoshow").hide();
    }
});

$("#div3").draggable({
    revert: true,
    start: function (event, ui) {
        $("#imagetoshow").fadeIn();
    },
    stop: function (event, ui) {
        $("#imagetoshow").hide();
    }
});

$("#div4").draggable({
    revert: true,
    start: function (event, ui) {
        $("#imagetoshow").fadeIn();
    },
    stop: function (event, ui) {
        $("#imagetoshow").hide();
    }
});

JSFIDDLE

是否可以为每个可拖动的函数调用一个函数？或者我应该为droppable div创建一个函数？提前谢谢。

Answer 1

你可以像这样减少你的js

$("#div1,#div2,#div3,#div4").draggable({
    revert: true,
    start: function (event, ui) {
        $("#imagetoshow").fadeIn();
    },
    stop: function (event, ui) {
        $("#imagetoshow").hide();
    }
});

或者您可以在div中使用类而不是id，并在js中调用此类

如何在拖动div时淡入淡出图像？

1 个答案: