Question

我正在尝试制作一个简单的游戏，其中我展示了五个电影海报，用户必须按发布日期订购，如附图所示（这些海报是我发现的随机海报）。

enter image description here

每张照片的编码如下：

<div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)" style="display:inline-block; position:relative">
        <img value="5" src="../images/movies/hobbit.png" draggable="true" ondragstart="drag(event)" id="drag15" width="162" height="240">
</div>

其中div11表示div1，image1，所以其他就像div12，div13 ...图像id drag15意味着这个图像是正确顺序的第五个，所以其他的是drag11，drag12 ...

他们将要放置的div是这样的：

<div id="div21" ondrop="drop(event)" ondragover="allowDrop(event)" style="display:inline-block; position:relative"></div>

因此，例如，id =“drag13”的图像必须放在id =“div23”的div中。我有以下功能允许在空白div中拖放图像，但是当我将图像拖动到已有图像的div时，第二个消失：

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

在这里你可以找到一个jsfiddle，试着帮助你理解我的意思和我现在拥有的东西：http://jsfiddle.net/3GKPn/2/

Answer 1

问题出在ondrop事件处理程序中，当删除img（不是div）时，使用此代码：

ev.target.appendChild(document.getElementById(data));

这会将拖动的图像附加到目标，也就是图像。因此拖动的图像消失了。您必须检查丢弃的目标是否是图像，如果它是图像，则自然行为是交换2个图像。这是应该的代码：

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var dragged = document.getElementById(data);
    //check if the dropping target is an image
    if(ev.target.tagName == "IMG") {
      //preparing to swap the 2 images (the dragged image and the target image)
      var parent = ev.target.parentElement || ev.target.parentNode;
      dragged.parentElement.appendChild(ev.target);
      parent.appendChild(dragged);
    } else {
      //check if the div already has some img, 
      //swap the 2 images
      if(ev.target.children.length > 0) {
        dragged.parentElement.appendChild(ev.target.children[0]);
      }
      ev.target.appendChild(dragged);
    }
}

我还修改了一点CSS以使图像更小，以便在jsFiddle中更好地渲染（和测试）。

Updated demo

Answer 2

试试这个小提琴：DragAndDropModule

$(function() {
// there's the gallery and the transfer
var $gallery = $( "#gallery" ),
    $transfer = $( "#transfer" ),
    $gen_dialog = $( '#gen_dialog' );

// let the gallery items be draggable
$( "li", $gallery ).draggable({
    cancel: "a.ui-icon", // clicking an icon won't initiate dragging
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: "move"        
});

// let the transfer be droppable, accepting the gallery items
$transfer.droppable({
    accept: "#gallery > li",
    activeClass: "ui-state-highlight",
    drop: function( event, ui ) {
        deleteImage( ui.draggable );
    }
});

// let the gallery be droppable as well, accepting items from the transfer
$gallery.droppable({
    accept: "#transfer li",
    activeClass: "custom-state-active",
    drop: function( event, ui ) {
        recycleImage( ui.draggable );
    }
});

// set up the generate button's dialog box
$gen_dialog.dialog({
    autoOpen:false,
    height:140,
    'title': 'Generated Report',
    modal:true
});

// function for generating info of icon/s in drop box
$('button.generate').click(function() {
    var content = $('ul li h5', $transfer).map(function(i, v) {
        return $(this).text();
    }).get();
    $gen_dialog.find('.diag-content').html(content.join(', ')).end().dialog('open');
});
//function for resetting the icons back to original positions
$('button.reset').click(function() {
    $('ul li', $transfer).each(function() {
        recycleImage($(this));
    });
});

toggleButtons();

        // image deletion function
        var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Transfer this icon back' class='ui-icon ui-icon-transfer-e-w'>Transfer this icon back</a>";
        function deleteImage( $item ) {
          $item.fadeOut(function() {
            var $list = $( "ul", $transfer ).length ?
              $( "ul", $transfer ) :
              $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $transfer );

            $item.find( "a.ui-icon-transferthick-e-w" ).remove();
            $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
              $item
                .animate({ width: "48px" })
                .find( "img" )
              .animate({ height: "36px" }, function() {
            toggleButtons();
              });
            });
          });
        }

        // image recycle function
        var transfer_icon = "<a href='link/to/transfer/script/when/we/have/js/off' title='Transfer Across' class='ui-icon ui-icon-transferthick-e-w'>Transfer Across</a>";
        function recycleImage( $item ) {
          $item.fadeOut(function() {
            $item
              .find( "a.ui-icon-transfer-e-w" )
                .remove()
              .end()
              .css( "width", "96px")
              .append( transfer_icon )
              .find( "img" )
                .css( "height", "72px" )
              .end()
              .appendTo( $gallery )
            .fadeIn(function() {
            toggleButtons();
            });
          });
        }
// display buttons when icon transferred across     
function toggleButtons() {
    $('div.col3 button').toggle($('> ul > li', $transfer).length > 0);
}


        // resolve the icons behavior with event delegation
        $( "ul.gallery > li" ).click(function( event ) {
          var $item = $( this ),
            $target = $( event.target );

          if ( $target.is( "a.ui-icon-transferthick-e-w" ) ) {
            deleteImage( $item );
          } else if ( $target.is( "a.ui-icon-transfer-e-w" ) ) {
            recycleImage( $item );
          }

          return false;
        });
      });

订购图像游戏

2 个答案:

Updated demo