时间戳

首页 > 解决方案 > 改变一个元素的视角会影响另一个元素的位置

css - 改变一个元素的视角会影响另一个元素的位置

问题描述

我有一个可以由 27 个元素组成的三项式立方体。可以通过 dblclick 更改每个部分的透视图。页面分为两个 div：left（灰色硬币容器）- 包含立方体的碎片；和右（白色区域） - 用户可以在其中组装立方体。问题是改变左边一个元素的视角会影响已经排列在右边的元素的位置。例如，在我的代码片段中，您会看到如果最后一块 (id = 4) 放置在右侧，并且您尝试更改黑色元素的视角，那么 #4 块的位置将会改变。

我想分离 div 或使元素不相关以防止这种行为。我该怎么做？

$( function() {
    $( "#1" ).draggable();
} );

$( function() {
    $( "#2" ).draggable();
} );

$( function() {
    $( "#3" ).draggable();
} );

$( function() {
    $( "#4" ).draggable();
} );

$( function() {
    $( "#21" ).draggable();
} );

// Changing perspective
var images1 = [
    "https://i.postimg.cc/XNy5t0Fq/1-2.gif",
    "https://i.postimg.cc/8C5J48N1/1-3.gif",
    "https://i.postimg.cc/fLS34xVp/2-1.gif",
];
var imageIndex = 0;
var imagesTag2 = document.getElementById("2")
var imagesTag3 = document.getElementById("3")
var imagesTag21 = document.getElementById("21")

imagesTag2.addEventListener("dblclick", function(event){
    imageIndex = (++imageIndex % 3);
    event.target.src = images1[imageIndex];
});

imagesTag3.addEventListener("dblclick", function(event){
    imageIndex = (++imageIndex % 3);
    event.target.src = images1[imageIndex];
});

imagesTag21.addEventListener("dblclick", function(event){
    imageIndex = (++imageIndex % 3);
    event.target.src = images1[imageIndex];
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Trinomial Cube </title>
    <link rel="stylesheet" href="trinominal.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="trinominal.js"></script>
</head>

<body>
  <div class="page" style="display: flex; width: 100%; height: auto;"> 
    <div class="cotainer" style="flex-direction: column; width: 45%; background-color: grey;">
      <img src="https://i.postimg.cc/85x6sy8T/1-1.gif" id="1">
      <img src="https://i.postimg.cc/XNy5t0Fq/1-2.gif" id="2">
      <img src="https://i.postimg.cc/XNy5t0Fq/1-2.gif" id="3">
      <img src="https://i.postimg.cc/XNy5t0Fq/1-2.gif" id="21">
      <img src="https://i.postimg.cc/sDdWr09c/1-4.gif" id="4">
    </div>
    
    <div class="dropzone" style="width: 55%;">
      <!-- An area for the elements to be arranged --> 
    </div>
  </div>
</body>
</html>

标签： css

解决方案

推荐阅读