1

我正在开发一个项目,该项目现在包含一个包含可拖动 div 的可打开菜单。我已经设置了一个带有 droppable 的网格,因此当我从菜单中拖动 div 并将其放在网格上的一个 div 上时,我将它放在上面的 div 会克隆它。

您可以将其想象为抓取桌面上的一个图标,然后将其放到另一个位置。

我遇到的问题是,当我第一次删除 div 时,它看起来很正常,如下所示:http: //i.imgur.com/nnSGFaF.png

但是当我抓住被丢弃的 div 并将其拖到另一个盒子时,会发生一些非常奇怪的事情,就像这样(我在该列中不断地从上到下抓住并丢弃 div):http://i.imgur .com/Ddz76Dy.png

原谅我,我尝试设置一个 jsfiddle,但它并不完全有效。当您单击左侧的栏时,带有可拖动 div 的菜单不会打开。请随时尝试使其工作!jsfiddle.net/MarcosPortugal/KWJzS/

这是html代码:

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Robin Blom</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- styles -->
  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/mycss.css" />

  <!-- calling scripts - bootstrap&jquery -->
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
</head>
<!-- 

BODY 

-->
<body>

  <div class="grid-container">

  </div>


  <!-- Script in the end for faster page loading -->
  <script src="js/startpage.js"></script>
  <script>
  renderGrid();
  renderBoxMenu();
  renderTestIcon();
  </script>
</body>
</html>

和javascript代码(最后一部分,在“网站的jQuery”评论之后,对于这个问题最重要):

/* Javascript file */

//Function that renders the grid used to place the icons
function renderGrid(){
    /*
    VARS USED FOR BOX SIZES (in pixels)
  */

  var box_width = 100;
  var box_height = 100;
  var box_margin = 10;  // The space between boxes
  var box_background_color = 'rgba(150, 150, 150, 0.5)';

  var user_width = $(window).width();
  var user_height = $(window).height();

    /* 
    Calculating the number of columns/rows to be drawn based on the dimensions of the user's viewport
    */

    // Number of boxes horizontally counted
    var box_horizontal_number = Math.floor( (user_width - box_margin) / (box_width + box_margin) ); 

    //Number of boxes vertically counted
    var box_vertical_number = Math.floor( (user_height - box_margin) / (box_height + box_margin) );

  /*
  Drawing the grid-container on the browser
  */
  var grid_container_string = '<div class="grid-container"></div>';

  // Printing the grid-container
  $( "body" ).append( box_string );

  // Calculating the width and height of the container
  var grid_width = ( box_horizontal_number * box_width ) + ( box_horizontal_number * box_margin );
  var grid_height = ( box_vertical_number * box_height ) + ( box_vertical_number * box_margin );

  //Adding css to the grid-container
  $( ".grid-container ").css({
    "position": 'absolute',
    "width": grid_width,
    "height": grid_height,
    "top": '50%',
    "left": '50%',
    "margin-top": -( grid_height / 2 ),
    "margin-left": -( grid_width / 2 ),
    "z-index": '-2'
  });

    /*
    Drawing the grid on the browser
    */

    var box_string = '<div class="box"></div>';

    // Printing the box div's
    for(var i = 0; i < ( box_horizontal_number * box_vertical_number ); i++) {
        $( ".grid-container" ).append( box_string );
    };

    // Adding the CSS to the box div's
    $( ".box ").css({
        "display": 'inline-block',
        "width": box_width,
        "height": box_height,
    "background-color": box_background_color,
    "border-radius": '5px',
    "margin": ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px',
    "z-index": '-1'

  });
}; // End of renderGrid();

// Function that renders the menu from where the icons are chosen
function renderBoxMenu(){
  /*
  VARS USED FOR THE BOX-MENU
  */
  var box_menu_width = 300;
  var box_menu_height = 500;
  var box_menu_color = "rgba(150, 150, 150, 0.7)";

  var box_menu_handle_width = 20;
  var box_menu_handle_color = "rgba(255, 255, 255, 0.7)";

  /* Drawing the box-menu */
  var box_menu_string  = '<div class="box-menu"> <div class="box-menu-handle"></div> </div>';

  $( "body" ).append( box_menu_string );

  /* Adding the CSS to the box_menu and box_menu_handle */
  $( ".box-menu ").css({
    "position": 'absolute',
    "width": box_menu_width,
    "height": box_menu_height,
    "left": -(box_menu_width - box_menu_handle_width),
    "top": '50%',
    "margin-top": -( box_menu_height / 2 ),
    "background-color": box_menu_color,
    "overflow": 'hidden'    
  });
  $( ".box-menu-handle ").css({
    "position": 'relative',
    "height": box_menu_height,
    "width": box_menu_handle_width,
    "float":'right',
    "background-color": box_menu_handle_color
  });


};// End of renderBoxMenu();

// Function that renders a test icon on the icon menu
function renderTestIcon(){
  test_icon_string = '<div class="test-icon"></div>'

  $(".box-menu").append(test_icon_string);

  $(".test-icon").css({
    "width": '100px',
    "height": '100px',
    "border-radius": '5px',
    "background-color": 'blue'
  });
};

function setUnlockedMode(){};

function setLockedMode(){
  //$(".grid-container").fadeOut();
};





/* jQuery for the website */

var box_menu_state = "hidden"; // box is hidden by default
$(document).ready(function(){

  // jQuery for the box menu handle
  $(".box-menu-handle").click(function(){
    if( box_menu_state == "hidden" ){
      $(".box-menu").animate( { left: 0 }, 500 );
      box_menu_state = "visible";
      setUnlockedMode();
    }else{
      $(".box-menu").animate( { left: -( $(".box-menu").width() - $(".box-menu-handle").width() ) }, 500 );
      box_menu_state = "hidden";
      setLockedMode();
    }
  });

  //jQuery for the ... draggable stuff
  $( ".test-icon" ).draggable({
    containment: "body",
    helper: function(){
      $copy = $(this).clone();
      return $copy;
    },
    appendTo: 'body',
    scroll: false
  });

  $( ".box" ).droppable({
    drop: function( event, ui ){
      $(this).html( $(ui.draggable).clone() );
      $(this).droppable('disable');

      $( this ).draggable({
        containment: "body",
        helper: function(){
          $copy = $(this).clone();
          return $copy;
        },
        appendTo: 'body',
        scroll: false
      });
    }
  });
});

请帮助我,因为我已经尝试解决这个问题几个小时但找不到解决方案。如果有不清楚的地方,请问我,我会解释!太感谢了!

4

0 回答 0