可拖动的Jquery UI开头和;停

Question

阅读关于JQuery UI的文档＆amp; s＆amp;我正在使用此插件中的draggable（）函数＆amp;我能够拖拽放弃一个div。

但现在我要拖动缩略图（＃b1）＆amp;在我的下降我的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

Answer 2

试试这个。

$("[myThumbnail]").draggable({

    start:function(event, ui){
        // get thumbnail
        var myThumbnail = $(this);
    },
    stop:function(event, ui){
        // get div
        // cannot!!!
    }

});

$( "[myDiv]" ).droppable({

  drop: function(event, ui) {
      var myThumbnail = ui.draggable;
  }

});