-1

Имеется код, который осуществляет анимацию.Как сделать так, чтобы при помещении "груз" в "блок1", "груз" становился дочерним по отношению к "блок1" ("блок1" - родитель). При нажатии кнопки "старт" осуществлялось движение "блока1" совместно с "грузом."

$(document).ready(function() {
  $("#start").click(function() {
    $("#lineL").animate({
      height: 500
    }, 5000);
    $("#lineP").animate({
      height: 50
    }, 5000);
    $("#dragL").animate({
      top: 550
    }, 5000);
    $("#dragP").animate({
      top: 110
    }, 5000);
  });

  $("#stop").click(function() {
    $("#lineL").stop();
    $("#lineP").stop();
    $("#dragL").stop();
    $("#dragP").stop();
  });

  $("#nachalo").click(function() {
    $("#lineL").css({
      height: 50
    });
    $("#lineP").css({
      height: 500
    });
    $("#dragL").css({
      top: 130,
      left: 95
    });
    $("#dragP").css({
      top: 580,
      left: 190
    });
  });

  $("#gruz").draggable({
    stack: "#dragL",
    revert: true
  });
  $("#dragL").droppable({
    drop: function() {

      $("#dragL").html("Помещен в контейнер");
      $("#gruz").draggable({
        revert: false
      });


    }
  });
});
#lineL {
  position: absolute;
  top: 80px;
  left: 105px;
  width: 2px;
  height: 50px;
  background-color: black;
}
#lineP {
  position: absolute;
  top: 80px;
  left: 205px;
  width: 2px;
  height: 500px;
  background-color: black;
}
#dragL {
  position: absolute;
  top: 130px;
  left: 95px;
  width: 30px;
  height: 50px;
  background-color: yellow;
}
#dragP {
  position: absolute;
  top: 580px;
  left: 190px;
  width: 30px;
  height: 50px;
  background-color: yellow;
}
#gruz {
  position: absolute;
  top: 100px;
  left: 300px;
  width: 30px;
  height: 50px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<div id="lineL"></div>
<div id="lineP"></div>
<div id="dragL">Блок1</div>
<div id="dragP">Блок2</div>
<div id="gruz">груз</div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="nachalo">Сначала</button>

2 ответа 2

1

На чистом это делается так

parent.appendChild(child);

где, parent - блок, куда помещаем, child - блок, который помещаем в контейнер

На jq

$(parent).append(child);
0

1- добавить груз к родителю

2- переписать css чтоб не випирал

$(document).ready(function() {
  $("#start").click(function() {
    $("#lineL").animate({
      height: 500
    }, 5000);
    $("#lineP").animate({
      height: 50
    }, 5000);
    $("#dragL").animate({
      top: 550
    }, 5000);
    $("#dragP").animate({
      top: 110
    }, 5000);
  });

  $("#stop").click(function() {
    $("#lineL").stop();
    $("#lineP").stop();
    $("#dragL").stop();
    $("#dragP").stop();
  });

  $("#nachalo").click(function() {
    $("#lineL").css({
      height: 50
    });
    $("#lineP").css({
      height: 500
    });
    $("#dragL").css({
      top: 130,
      left: 95
    });
    $("#dragP").css({
      top: 580,
      left: 190
    });
  });

  $("#gruz").draggable({
    stack: "#dragL",
    revert: true
  });
  $("#dragL").droppable({
    drop: function() {

      $("#dragL").html("Помещен в контейнер");
      $("#gruz").appendTo("#dragL");
      $("#gruz").draggable({
      	revert: false
      });
      $("#gruz").css({
          top: 0,
          left: 0
      });


    }
  });
});
#lineL {
  position: absolute;
  top: 80px;
  left: 105px;
  width: 2px;
  height: 50px;
  background-color: black;
}
#lineP {
  position: absolute;
  top: 80px;
  left: 205px;
  width: 2px;
  height: 500px;
  background-color: black;
}
#dragL {
  position: absolute;
  top: 130px;
  left: 95px;
  width: 30px;
  height: 50px;
  background-color: yellow;
}
#dragP {
  position: absolute;
  top: 580px;
  left: 190px;
  width: 30px;
  height: 50px;
  background-color: yellow;
}
#gruz {
  position: absolute;
  top: 100px;
  left: 300px;
  width: 30px;
  height: 50px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<div id="lineL"></div>
<div id="lineP"></div>
<div id="dragL">Блок1</div>
<div id="dragP">Блок2</div>
<div id="gruz">груз</div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="nachalo">Сначала</button>

1
  • А если будет несколько грузов различной высоты!
    – Мария
    15 авг 2015 в 8:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.