javascript - 带启动和停止功能的 Draggables Jquery UI

Question

阅读有关 JQuery UI 的文档，我正在使用此插件中的draggable() 函数，并且我能够拖放 div。

但现在我想拖动缩略图 (#b1) & 在我的拖放上我的 div (#d) 应该出现。我知道事件中有一个 currentTarget 正在调用缩略图。我知道我必须改变

 var objArr = new Array();

  $(function() {    
  $( "#b1" ).draggable({
  start: function(event, ui) {

  },
  stop: function(event, ui) {

        $(".box").append('<div id="box'+objArr.length+'" class="border" onclick="$(this).resizable();$(this).draggable();"><img src="close.png" alt="close" width="20" height="20" class="close" id=box"'+objArr.length+'" onclick="$(this).parent().hide();">  <textarea rows="2" class="txt" id="TextBox'+objArr.length+'" cols="2"></textarea></div>');          
        var tmpObj = $("#box"+objArr.length)
        tmpObj.offset().top = event.clientY
        tmpObj.offset().left = event.clientX
        objArr.push(tmpObj)

  }
});

我不知道该怎么做。请帮忙。

Answer 1

以下是您想要执行的操作的示例:
JQuery

$("#one").data("fullImageSrc", "http://cdn.asriran.com/files/fa/news/1389/10/27/162857_203.jpg");
$("#two").data("fullImageSrc", "http://far30.net/wp-content/uploads/2012/05/03.jpg");
$(".draggable").draggable({
    cursor: "crosshair",
    revert: "invalid"
});
$("#drop").droppable({
    accept: ".draggable",
    drop: function (event, ui) {
        console.log("drop");
        $(this).removeClass("border").removeClass("over");
        var dropped = ui.draggable;
        var droppedOn = $(this);
        var fullImageUrl = $(dropped).data("fullImageSrc");
        var imgSrc = $(dropped).attr("src");
        $(dropped).detach().css({
            top: 0,
            left: 0
        }).hide().attr("src", fullImageUrl).data("fullImageSrc", imgSrc).load(function () {
            $(this).show();
        }).appendTo(droppedOn);
    },
    over: function (event, elem) {
        $(this).addClass("over");
        console.log("over");
    },
    out: function (event, elem) {
        $(this).removeClass("over");
    }
});
$("#drop").sortable();
$("#origin").droppable({
    accept: ".draggable",
    drop: function (event, ui) {
        console.log("drop");
        $(this).removeClass("border").removeClass("over");
        var dropped = ui.draggable;
        var droppedOn = $(this);
        var fullImageUrl = $(dropped).data("fullImageSrc");
        var imgSrc = $(dropped).attr("src");
        $(dropped).detach().css({
            top: 0,
            left: 0
        }).hide().load(function () {
            $(this).show();
        }).attr("src", fullImageUrl).data("fullImageSrc", imgSrc).appendTo(droppedOn);
    }
});

DEMO