Skip to content

Commit

Permalink
Add render after drag and drop
Browse files Browse the repository at this point in the history
  • Loading branch information
Sky161 committed Aug 27, 2016
1 parent 9144873 commit eeab835
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 43 deletions.
70 changes: 35 additions & 35 deletions sass/main.sass
Original file line number Diff line number Diff line change
Expand Up @@ -24,41 +24,6 @@ html
font-size: 12px
font-family: "firasansMedium", sans-serif

li
display: flex
align-items: center
border-top: 1px solid #f0f0f0
height: 58px
background: #fff
width: 260px
user-select: none

&:hover
background: #f0f0f0
+transitionMixin(background)

img
border-radius: 100%
margin-right: 8px
margin-left: 5px

p
margin: 0

span
margin-left: auto
display: block
margin-right: 5px
cursor: pointer

.add
+bg("pluse.png", no-repeat)
+sizeMixin(16px)

.remove
+bg("close.png", no-repeat)
+sizeMixin(14px)

*
box-sizing: border-box

Expand Down Expand Up @@ -131,6 +96,7 @@ html
height: 354px
overflow: auto
padding: 0 16px
user-select: none

.title
padding: 10px 0 1px
Expand All @@ -139,6 +105,40 @@ html
+resetCss
list-style-type: none

li
display: flex
align-items: center
border-top: 1px solid #f0f0f0
height: 58px
background: #fff
width: 260px

&:hover
background: #f0f0f0
+transitionMixin(background)

img
border-radius: 100%
margin-right: 8px
margin-left: 5px

p
margin: 0

span
margin-left: auto
display: block
margin-right: 5px
cursor: pointer

.add
+bg("pluse.png", no-repeat)
+sizeMixin(16px)

.remove
+bg("close.png", no-repeat)
+sizeMixin(14px)

footer
width: 100%
height: 45px
Expand Down
32 changes: 24 additions & 8 deletions scripts/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,18 @@ document.addEventListener("DOMContentLoaded", () => {
}
});

const renderFavoriteList = (idElement) => {
moveObj(idElement, vkList, favoriteList);
render(favoriteListContainer, {"items": favoriteList}, tmpFavoriteList);
render(vkListContainer, {"items": vkList}, tmpVklist);
};

container.addEventListener("click", function(e) {
let thisTarget = e.target;
let id = Number(thisTarget.parentElement.dataset.id);

if(thisTarget.className === "add"){
moveObj(id, vkList, favoriteList);
render(favoriteListContainer, {"items": favoriteList}, tmpFavoriteList);
render(vkListContainer, {"items": vkList}, tmpVklist);
renderFavoriteList(id);
}else if(thisTarget.className === "remove") {
moveObj(id, favoriteList, vkList);
render(favoriteListContainer, {"items": favoriteList}, tmpFavoriteList);
Expand All @@ -60,7 +64,7 @@ document.addEventListener("DOMContentLoaded", () => {
thisTarget.style.position = "absolute";
thisTarget.style.zIndex = 100;
let offsetX = e.offsetX;
let offsetY = e.offsetY;
let offsetY = e.offsetY + vkListContainer.parentElement.scrollTop;
let coordinats = container.parentElement.getBoundingClientRect();
const move = (e) => {
thisTarget.style.top = `${e.pageY - coordinats.top - offsetY}px`;
Expand All @@ -69,23 +73,35 @@ document.addEventListener("DOMContentLoaded", () => {

move(e);

container.addEventListener("mousemove", (e) => {
thisTarget.getElementsByTagName("img")[0].ondragstart = () => { return false; }

document.addEventListener("mousemove", (e) => {
if(!thisTarget) return false;
move(e);
});

document.addEventListener("mouseup", (e) => {
let coordinatsDrop = favoriteListContainer.getBoundingClientRect();
let coordinatsDrop = favoriteListContainer.parentElement.getBoundingClientRect();
let left = coordinatsDrop.left;
let right = coordinatsDrop.left + coordinatsDrop.width
let top = coordinatsDrop.top
let bottom = coordinatsDrop.top + coordinatsDrop.height

if(e.clientX > left && e.clientX < right && e.clientY > top && e.clientY < bottom) {
console.log(coordinatsDrop);

const resetDragable = () => {
thisTarget.removeAttribute("style");
thisTarget = null;
}

if((e.clientX > left && e.clientX < right) && (e.clientY > top && e.clientY < bottom)) {
if(!thisTarget) return false;
let id = Number(thisTarget.dataset.id);
renderFavoriteList(id);
resetDragable();
}else{
if(!thisTarget) return false;
thisTarget.removeAttribute("style");
resetDragable();
}
});
});
Expand Down

0 comments on commit eeab835

Please sign in to comment.