Question

在div中我有很多图片标记（即10）：

echo '<figure class="figure" id="fig'.$pos[1].'">';
echo '<img src="'.$img.'" width="auto" height="50" alt="" />';
echo '</figure>';

我想在这个div中使用拖放功能（纯JS，没有JQ）添加新图像。一旦新图像被丢弃，我就会得到它的左侧位置。

console.log("OBJ "+o+" left = "+l);
-> OBJ img11.jpg left = 408

在我的JS开头，我写了一个数组，其中包含div的每个前一个图像的offsetLeft pos：

console.log("FIGS posleft = "+tab_pos_l);
-> FIGS posleft = 26,125,163,262,339,377,422,485,501

现在我可以根据左边的位置确定要移动哪些图像：

for (i=0; i<tab_pos_l.length; i++) {
    if ( l < tab_pos_l[i] ) { // if obj left smaller than figure left
      console.log("MOVE "+$('bloc'+i)+" ID="+$('bloc'+i).id+" LEFT="+$('bloc'+i).offsetLeft);
    }
}

// $('bloc'+i) == document.getElementById('bloc'+i);

结果是：

  OBJECT [object HTMLElement] ID = bloc7 LEFT = 422
  OBJECT [object HTMLElement] ID = bloc8 LEFT = 485
  OBJECT [object HTMLElement] ID = bloc9 LEFT = 501

我无法理解为什么$（＆＃39; bloc＆＃39; + i）未定义（但它可以提供正确的图像偏移左侧）以及$（＆＃39; bloc＆＃39; + i）.id需要一个额外的.id来提供真实身份证......当然还有

 $('bloc'+i).style.left = ( $('bloc'+i).offsetLeft + l )+"px";

不起作用。

Answer 1

 tab_pos_l = [26,125,163,262,339,377,422,485,501];
 l = 500;

 for (i=0; i<tab_pos_l.length; i++) {
   if ( l < tab_pos_l[i] ) { 
     // document.getElementById('bloc'+i) == [object HTMLElement]
     // document.getElementById('bloc'+i).id == "bloc9"
     // document.getElementById('bloc'+i).offsetLeft == "501"
   }
 }

我无法理解为什么document.getElementById（'bloc'+ i）.offsetLeft给出了预期的结果，但没有给出document.getElementById（'bloc'+ i）。要获得真实ID，需要额外的.id。所以我无法修改“bloc9”的左侧pos，因为我无法在DOM中访问它。

补充：我尝试了另一种方式继续。我为img添加了一个id标记，以便访问其parentNode（图形标记）

  echo '<figure id="bloc'.$dat[1].'".......>'
  echo '<img id="im'.$dat[1].'".......>'

    var b = $('im'+i).parentNode;
    console.log("B.id = "+b.id);
    console.log("B.off = "+b.offsetLeft);
    console.log("B.pos = "+b.style.left);

控制台

    B.id = bloc9
    B.off = 501
    B.pos =

第二次补充：哦，不，这是不可思议的

var x = document.getElementsByTagName("figure")[i].getAttribute("id"); 
var y = document.getElementsByTagName("figure")[i].offsetLeft; 
document.getElementsByTagName("figure")[i].style.left = 1000+"px"; 
var z = document.getElementsByTagName("figure")[i].style.left; 
console.log(x+"="+y+"="+z);

控制台

bloc9=501=1000px

但在div中我的形象没有移动。我可以（相信它）

对象HTMLElement：ID和POS

1 个答案: