Question

我正在开发一个简单的jQuery UI项目。我在＆＃34; blue＆＃34;中拖动图像。 div为空的＆＃34; red＆＃34;格。

我可以将图像代码插入＆＃34;红色＆＃34; div，以及。但是我真正想要的是，拖动完成后，删除第一个项目。

总之，将图片拖到另一个div。无论用户掉落在哪里，都要将它贴在左上角。

    <script>
    var imgCode = '<img src="42.jpg" id="dragPic" alt="42" width="100" height="100">'; //This is my image code
        $(function() {
          $( "#dragPic" ).draggable(); //Image will be draggable
          $( "#red" ).droppable({ //Image has dragged into "red" div
            drop: function( event, ui ) {
              $( this )
                .addClass( "redDrop" ) //Custom CSS
                  .html(imgCode); //Insert image inside div
           /* Now I need to remove the image that user dragged. */
            }
          });
        });
    </script>

Answer 1

您可以使用“drop”功能中的“ui.draggable”访问正在拖动的项目。

      $( "#dragPic" ).draggable(); //Image will be draggable
      $( "#red" ).droppable({ //Image has dragged into "red" div
        drop: function( event, ui ) {
          $(this).addClass( "redDrop" ).html(ui.draggable); //Insert image inside div
          $(ui.draggable).css({position:''}); //reset the position of the dragged element
       /* Now I need to remove the image that user dragged. */
        }
      });

工作示例： http://jsfiddle.net/ep0ucxcn/

jQuery UI删除丢弃的对象

1 个答案: