Fatal编程技术网
  • jquery-ui/
  • Jquery ui 拖放、继承css属性和创建克隆辅助对象

Jquery ui 拖放、继承css属性和创建克隆辅助对象

jquery-ui

Jquery ui 拖放、继承css属性和创建克隆辅助对象,jquery-ui,drag-and-drop,z-index,Jquery Ui,Drag And Drop,Z Index,我试着做一个立方体游戏，但有几个问题。我似乎无法让前面的积木掩盖后面的积木。有没有一种方法可以从立方体所在的对象继承z-index css属性 另一个问题是，我无法使助手：克隆，函数在我的情况下工作。克隆不会捕捉到网格，而是返回到它的位置 css: javascript、jQueryUI、javasript和html： <script type="text/javascript"> $( init0 ); function init0() { $( ".makeMeDropp

我试着做一个立方体游戏，但有几个问题。我似乎无法让前面的积木掩盖后面的积木。有没有一种方法可以从立方体所在的对象继承z-index css属性

另一个问题是，我无法使助手：克隆，函数在我的情况下工作。克隆不会捕捉到网格，而是返回到它的位置

css:

javascript、jQueryUI、javasript和html：

<script type="text/javascript">

$( init0 );

function init0() {
  $( ".makeMeDroppable1" ).droppable({
    accept: "#makeMeDraggable1, #makeMeDraggable2, #makeMeDraggable3",
    drop: function(event, ui) {
       var $this = $(this);
       ui.draggable.position({
         my: "center",
         at: "center",
         of: $this,
         using: function(pos) {
           $(this).animate(pos, 200, "linear");
         }
       });
     }
  });

}


$( init1 );

function init1() {
  $('#makeMeDraggable1').draggable( {
    containment: '#gameFull',
    cursor: 'move',
    revert: "invalid",
    appendTo: ".makeMeDroppable1"
  } );


}

$( init2 );

function init2() {
  $('#makeMeDraggable2').draggable( {
    containment: '#gameFull',
    cursor: 'move',
    revert: "invalid",
    appendTo: ".makeMeDroppable1"
  } );
}

$( init3 );

function init3() {
  $('#makeMeDraggable3').draggable( {
    containment: '#gameFull',
    cursor: 'move',
    revert: "invalid",
    appendTo: ".makeMeDroppable1"
  } );
}

</script>
<div id="gameFull">
<div class="drop_zone">
  <div class="drop_block_1 makeMeDroppable1"></div>
  <div class="drop_block_2 makeMeDroppable1"></div><div class="drop_block_3 makeMeDroppable1"></div>
  <div class="drop_block_4 makeMeDroppable1"></div><div class="drop_block_5 makeMeDroppable1"></div><div class="drop_block_6 makeMeDroppable1"></div>
  <div class="drop_block_7 makeMeDroppable1"></div><div class="drop_block_8 makeMeDroppable1"></div><div class="drop_block_9 makeMeDroppable1"></div><div class="drop_block_10 makeMeDroppable1"></div>
  <div class="drop_block_11 makeMeDroppable1"></div><div class="drop_block_12 makeMeDroppable1"></div><div class="drop_block_13 makeMeDroppable1"></div>
  <div class="drop_block_14 makeMeDroppable1"></div><div class="drop_block_15 makeMeDroppable1"></div>
  <div class="drop_block_16 makeMeDroppable1"></div>

</div>

  <div class="cubic_one_game">
    <div>
      <img id="makeMeDraggable1" class="singleCube" src="../wordpress/wp-content/themes/tadek/img/cube_one_game-01.svg">
      <p>moduł kuchenny</p>
    </div>
    <div>
      <img id="makeMeDraggable2" class="singleCube" src="../wordpress/wp-content/themes/tadek/img/cube_one_game-02.svg">
      <p>moduł sypialniany</p>
    </div>
    <div>
      <img id="makeMeDraggable3" class="singleCube" src="../wordpress/wp-content/themes/tadek/img/cube_one_game-03.svg">
      <p>moduł łazienkowy</p>
    </div>
  </div>
</div>


美元（初始值0）；
函数init0（）{
$（“.makeMedropable1”）。可拖放({
接受：“#makeMeDraggable1，#makeMeDraggable2，#makeMeDraggable3”，
drop：函数（事件、用户界面）{
var$this=$（this）；
ui.draggable.position({
我的“中心”，
在“中心”，
其中：，
使用：功能（pos）{
$（此）.animate（位置200，“线性”）；
}
});
}
});
}
美元（初始值1）；
函数init1（）{
$（'#makeMeDraggable1'）。可拖动（{
遏制：“#游戏化”，
光标：“移动”，
回复：“无效”，
附录：“.makeMedropable1”
} );
}
美元（初始值2）；
函数init2（）{
$（“#makeMeDraggable2'）。可拖动（{
遏制：“#游戏化”，
光标：“移动”，
回复：“无效”，
附录：“.makeMedropable1”
} );
}
美元（初始值3）；
函数init3（）{
$（'#makeMeDraggable3'）。可拖动（{
遏制：“#游戏化”，
光标：“移动”，
回复：“无效”，
附录：“.makeMedropable1”
} );
}
莫杜库切尼

莫杜西皮亚尼

莫杜阿齐恩科维
游戏示例：

为此，我首先建议将
类
和
id
属性分开。这将使CSS中的内容更加明确，并使您的代码更易于分配

以下是我的建议：

HTML

<div id="gameFull">
  <div class="drop_zone">
    <div class="drop_block" id="block_1" data-row="1"></div>
    <div class="drop_block" id="block_2" data-row="2"></div>
    <div class="drop_block" id="block_3" data-row="2"></div>
    <div class="drop_block" id="block_4" data-row="3"></div>
    <div class="drop_block" id="block_5" data-row="3"></div>
    <div class="drop_block" id="block_6" data-row="3"></div>
    <div class="drop_block" id="block_7" data-row="4"></div>
    <div class="drop_block" id="block_8" data-row="4"></div>
    <div class="drop_block" id="block_9" data-row="4"></div>
    <div class="drop_block" id="block_10" data-row="4"></div>
    <div class="drop_block" id="block_11" data-row="5"></div>
    <div class="drop_block" id="block_12" data-row="5"></div>
    <div class="drop_block" id="block_13" data-row="5"></div>
    <div class="drop_block" id="block_14" data-row="6"></div>
    <div class="drop_block" id="block_15" data-row="6"></div>
    <div class="drop_block" id="block_16" data-row="7"></div>
  </div>
  <div class="cubic_one_game">
    <div>
      <img id="cube_1" class="singleCube" src="http://cubichouse.eu/wp-content/themes/cubic/img/cube_one_game-01.svg">
      <p>moduł kuchenny</p>
    </div>
    <div>
      <img id="cube_2" class="singleCube" src="http://cubichouse.eu/wp-content/themes/cubic/img/cube_one_game-02.svg">
      <p>moduł sypialniany</p>
    </div>
    <div>
      <img id="cube_3" class="singleCube" src="http://cubichouse.eu/wp-content/themes/cubic/img/cube_one_game-03.svg">
      <p>moduł łazienkowy</p>
    </div>
  </div>
</div>
JavaScript

$(function() {
  $(".drop_block").droppable({
    accept: ".singleCube",
    drop: function(e, ui) {
      var $this = $(this);
      ui.draggable.position({
        my: "center",
        at: "center",
        of: $this,
        using: function(pos) {
          $(this).animate(pos, 200, "linear");
        }
      });
      ui.draggable.css({
        "z-index": 1000 + $(this).data("row")
      });
    }
  });

  $('.singleCube').draggable({
    containment: '#gameFull',
    cursor: 'move',
    revert: "invalid"
  });
});
一开始这似乎是一项工作，但在某些情况下，这确实是一项很有帮助的实践。现在，我们可以根据需要轻松管理许多项目或单个项目

对于透视效果，最接近用户的元素应该具有最高的
z索引。我为每个
下拉框添加了
数据行
属性
，以便于管理。当项目被删除时，将根据其行为其分配一个新的
z-index
。这确保了正确的视角


您可能想考虑何时拖动一个项目，强制它的代码> z索引< /代码>到一个更高的值，以便它将出现在其他元素之上。将项目从“后”行向前移动，具有传递到“更近”元素后面的效果。CSS中的简单操作：


.singleCube.ui-draggable-dragging {
  z-index: 2000;
}


工作示例：


希望这能有所帮助。
创建了以下测试：我看不出您迄今为止尝试了什么。基本上，在
drop
函数中，可以设置或传递要删除项目的
z-index
属性。但是每一行都必须有一个不同的z索引？如果你想的话，它们可以。他们当然不必这样做。我不清楚这是什么问题，因为拖动的项目在我拖动它们后会出现在网格上方。好的，我想我看到了问题，当将项目从“更近”的正方形移到更远的后面时，该项目位于其他已拖放项目的上方。因此失去了视角，效果不好。所以从这个意义上讲，每一行可能需要它的索引。

$(function() {
  $(".drop_block").droppable({
    accept: ".singleCube",
    drop: function(e, ui) {
      var $this = $(this);
      ui.draggable.position({
        my: "center",
        at: "center",
        of: $this,
        using: function(pos) {
          $(this).animate(pos, 200, "linear");
        }
      });
      ui.draggable.css({
        "z-index": 1000 + $(this).data("row")
      });
    }
  });

  $('.singleCube').draggable({
    containment: '#gameFull',
    cursor: 'move',
    revert: "invalid"
  });
});



.singleCube.ui-draggable-dragging {
  z-index: 2000;
}