Home>

Help create drag Drop sorting, I got only simple and then through the stump a deck, if there is an idea how to make a shadow only on Elentant and not all the boards tell me how to do, and help please make sorting drag drops, I will be very Boaagodar

const lists= document.queryselectorlall (". Boards__list")
//Add Task.
FUNCTION AddTask () {
  Const AddTaskBTN= Document.QuerySelector (". Boards__Item -Add")
  Const Form= Document.QuerySelector (". Boards__Form")
  Const AddBTN= Document.QuerySelector (". Boards__Buttons -Add")
  Const CancelBTN= Document.QuerySelector (". Boards__Buttons -Cancel")
  Const Area= Document.QuerySelector (". Boards__Form -Area")
  Let AreAvalue.
  form.addeventlistener ("submit", (E)= >
 {
    E.PreventDefault ()
  })
  addtaskbtn.addeventlistener ("Click", ()= >
 {
    Form.Style.Display= "Block"
    addtaskbtn.style.display= "none"
    addbtn.style.display= "none"
    Area.addeventlistener ("Input", (E)= >
 {
      Value= E.Target.Value.
      if (value) {
        addbtn.style.display= "block"
      } ELSE {
        addbtn.style.display= "none"
      }
    })
  })
  Cancelbtn.addeventlistener ("Click", ()= >
 {
    Area.Value= ""
    Value= ""
    Form.Style.Display= "None"
    addtaskbtn.style.display= "block"
  })
  addbtn.addeventlistener ("click", ()= >
 {
    Let NewItem= Document.CreateElement ("DIV")
    newItem.classList.add ("Boards__List -Item")
    NewItem.SetAttribute ("Draggable", "True")
    NewItem.TextContent= Value.
    Lists [0] .append (NewItem)
    Form.Style.Display= "None"
    addtaskbtn.style.display= "block"
    Area.Value= ""
    Value= ""
    DRAGNDROP ()
  })
}
AddTask ()
//Add Board
FUNCTION AddBoard () {
  Const AddBoard= Document.QuerySelector (". Addboard")
  Const Boards= Document.QuerySelector ("BOARDS")
  AddBoard.addeventlistener ("click", ()= >
 {
    Const Board= Document.CreateElement ("Div")
    Board.classList.add ("Boards__Item")
    board.innerhtml= `.
      ≪
Span Class= "Boards__Title" CONTENTEDITABLE= "TRUE" >
 Board's Name <
/span >
      ≪
div class= "boards__list" >
≪
/div >
    `
    Boards.APPEND (Board)
    ChangeTitle ()
    DRAGNDROP ()
  })
}
AddBoard ()
//Change Title
Function ChangeTitle () {
  const Titles= Document.QuerySelectorall (". Boards__Title")
  Titles.Foreach ((Item)= >
 {
    Item.AddeventListener ("Click", (E)= >
 {
      E.Target.TextContent= ""
    })
  })
}
ChangeTitle ()
//Dragndrop.
Let Dragitem= NULL
FUNCTION DRAGNDROP () {
  Const ListItem= Document.QuerySelectorall (". Boards__List -Item")
  Const Lists= Document.QuerySelectorall (". Boards__list")
  ListItem.Foreach ((Item)= >
 {
    Item.AddeventListener ("Dragstart", Function () {
      Dragitem= THIS
      setTimeout (()= >
 {
        Item.Style.Display= "None"
      }
 0)
    })
    Item.Addeventlistener ("Dragend", Function () {
      Dragitem= NULL.
      setTimeout (()= >
 {
        Item.Style.Display= "Block"
      }
 0)
    })
  })
  lists.Foreach ((Item)= >
 {
    Item.AddeventListener ("Dragover", Function (E) {
      E.PreventDefault ()
    })
    Item.Addeventlistener ("Dragenter", Function (E) {
      E.PreventDefault ()
      this.Style.BackgroundColor= "# 959595"
      this.Style.BorderRadius= "3px"
    })
    Item.AddeventListener ("Dragleave", Function (E) {
      E.PreventDefault ()
      this.Style.BackGroundColor= "Transparent"
    })
    Item.AddeventListener ("Drop", Function (E) {
      E.PreventDefault ()
      this.Style.BackGroundColor= "Transparent"
      This.Apandchild (Dragitem)
    })
  })
}
DRAGNDROP () 
//Variables
$ Body-Color: # 0079BF;
$ Card-Color: # Ebecf0;
$ Text-Color: # 3E4F6B;
$ Footer-Text-Color: # 7F8A9D;
$ Danger-Color: # DE350B;
$ White-Color: #FFFF;
/* Main Styles * /
* {
  Padding: 0;
  margin: 0;
  BOX-SIZING: BORDER-BOX;
}
HTML {
  overflow-x: hidden;
}Body {margin: 0;
  Font-Family: "Roboto", Sans-Serif;
  Font-Size: 15px;
  Background-Color: $ Body-Color;
  Color: $ White-Color;
}
h1
h2
h3
h4
H5
h6 {
  margin: 0;
  Padding: 0;
}
UL {
  List-Style: None;
}
A {
  Text-Decoration: None;
}
/* Container * /
.container {
  width: 100%;
  Max-width: 1170px;
  Margin: 0 AUTO;
  Padding: 15px;
}
//Boards.
.boards {
  DISPLAY: FLEX;
  width: 100%;
  &
__item {
    DISPLAY: FLEX;
    Flex-Direction: Column;
    Align-Self: Baseline;
    Max-width: 270px;
    width: 100%;
    Padding: 10px;
    margin-left: 30px;
    Border-Radius: 3px;
    Background-Color: $ Card-Color;
    Color: $ Text-Color;
    Transition: All 0.2S EASE;
    &
: first-child {
      margin-left: 0;
    }
    &
--Add {
      margin-top: 5px;
      Padding: 7px;
      CURSOR: POINTER;
      Border-Radius: 3px;
      Color: $ Footer-Text-Color;
      &
: hover {
        background-color: # 091E4214;
      }
    }
  }
  &
__title {
    Padding: 7px;
    Font-Size: 15px;
    font-weight: 500;
    &
: focus {
      Outline: 2px Solid $ Body-Color;
    }
  }
  &
__list {
    //MIN-Height: 35px;
    &
--Item {
      Padding: 7px;
      margin: 5px 0;
      CURSOR: POINTER;
      Background-Color: $ White-Color;
      Border-Radius: 3px;
      font-weight: 400;
    }
  }
  &
__form {
    Margin-Top: Auto;
    Display: None;
    Border-Radius: 3px;
    &
--area {
      width: 100%;
      Padding: 7px;
      Resize: None;
      Outline: none;
      Border: 0;
      Border-Radius: 3px;
      Background-Color: $ White-Color;
      Color: $ Text-Color;
    }
  }
  &
__buttons {
    DISPLAY: FLEX;
    &
--Add {
      Padding: 10px 15px;
      Background-Color: $ Body-Color;
      Outline: none;
      Border: 0;
      Border-Radius: 3px;
      Color: $ White-Color;
      CURSOR: POINTER;
    }
    &
--Cancel {
      Padding: 10px 15px;
      margin-left: 5px;
      Background-Color: $ Danger-Color;
      Outline: none;
      Border: 0;
      Border-Radius: 3px;
      Color: $ White-Color;
      CURSOR: POINTER;
    }
  }
}
.addboard {
  width: 200px;
  Padding: 10px;
  DISPLAY: FLEX;
  Justify-Content: Center;
  Align-Items: Center;
  CURSOR: POINTER;
  Position: Absolute;
  Bottom: 50px;
  Left: 50%;
  TRANSFORM: TRANSLATE (-50%);
  background-color: # fffff3d;
  Transition: 0.2S All Ease;
  &
: hover {
    background-color: #dedede;
  }
} 
<
! DOCTYPE HTML >
≪
HTML LANG= "EN" >
  ≪
HEAD >
    ≪
Meta Charset= "UTF-8" />
    ≪
META HTTP-EQUIV= "X-UA-compatible" content= "IE= edge" />
    ≪
Meta name= "ViewPort" CONTENT= "WIDTH= Device-Width, initial-scale= 1.0" />
    ≪
Title >
Trello Clone <
/title >
    ≪
! -Google Fonts ->
    ≪
Link REL= "preconnect" href= "https://fonts.googleapis.com" />
    ≪
Link REL= "preconnect" href= "https://fonts.gstatic.com" Crossorigin />
    ≪
LINK.
      href= "https://fonts.googleapis.com/css2?family=roboto:[email protected]; 500; 700&
Display= SWAP "
      REL= "STYESHEET"
    /≫
    ≪
! -CSS ->
    ≪
Link REL= "STYLESHEET" HREF= "./assets /css /style.css" />
  ≪
/Head >
  ≪
Body >
    ≪
! -CONTAINER ->
    ≪
DIV Class= "Container" >
      ≪
! -Boards ->
      ≪
DIV Class= "Boards" >
        ≪
! -Boards__Item ->
        ≪
DIV Class= "Boards__Item" >
          ≪
Span Class= "Boards__Title" CONTENTEDITABLE= "TRUE" >
FIRST Board <
/span >
          ≪
! -Boards__list ->
          ≪
div class= "boards__list" >
            ≪
DIV Class= "Boards__List -Item" Draggable= "True" >
Starts Card <
/div >
          ≪
/div >
          ≪
! -/Boards__list ->
          ≪
Form class= "Boards__Form" >
            ≪
Textarea.
              id= "Boards__Form -Area"
              class= "Boards__Form -Area"
              Placeholder= "Card's Name"
            ≫
≪
/TEXTAREA >
            ≪
Div Class= "Boards__Buttons" >
              ≪
Button class= "Boards__Buttons -add" >
Add Card <
/Button >≪ Button class= "Boards__Buttons -Cancel" >
Cancel <
/Button >
            ≪
/div >
          ≪
/Form >
          ≪
div class= "boards__item -add" >
≪
span >
+ ≪
/span >
 Add Card <
/div >
        ≪
/div >
      ≪
/div >
      ≪
! -/Boards ->
      ≪
DIV Class= "AddBoard" >
≪
span >
+ ≪
/span >
 Add More Board <
/div >
    ≪
/div >
    ≪
! -/Container ->
    ≪
! -JavaScript ->
    ≪
script src= "./assets /js /app.js" >
≪
/script >
  ≪
/Body >
≪
/HTML >

Try sortablejs or any other sort plugin.

nazarpunk2021-09-14 12:51:29

I wanted B without plug-ins on Vanilla JS

Week_seven Coursera2021-09-14 14:25:03
  • Answer # 1

    Try So.

    const List= Document.QuerySelector ('. List');
    const ListItems= Document.QuerySelectorall ('. List-Item');
    const listhidden= document.QuerySelector ('. List-Hidden');
    //Let Dragindex, Dragsource
    const getmouseoffset= EVT= >
     {
      const targetRect= EVT.Target.GetBoundingClientRect ();
      Const offset= {
        X: EVT.PAGEX -targetRect.left,
        Y: Evt.pagey -targetRect.Top
      };
      Return offset;
    };
    Const GetElementVerticalCenter= El= >
     {
      Const Rect= el.getBoundingClientRect ();
      Return (rect.bottom -rect.top) /2;
    };
    Const AppendPlaceHolder= (EVT, IDX)= >
     {
      EVT.PreventDefault ();
      if (IDX=== DRAGINDEX) {
        Return;
      }
      const offset= getmouseOffset (EVT);
      const middley= getelementverticalCenter (EVT.Target);
      const Placeholder= List.Children [Dragindex];
      //Console.log (`Hover on $ {IDX} $ {offset.y >
     Middley? 'Bottom Half': 'Top Half'} `)
      if (offset.y >
     Middley) {
        List.insertBefore (EVT.Target, Placeholder);
      } ELSE If (List.Children [IDX + 1]) {
        list.insertBefore (evt.target.nextsibling || Evt.Target, Placeholder);
      }
      Return;
    };
    Function Sortable (Rootel, OnUpdate) {
      Var Dragel;
      //Making All Siblings Movable
      [] .slice.call (ROOTEL.CHILDREN) .Foreach (Function (Itemel) {
        itemel.draggable= true;
      });
      //Function Responsible for Sorting
      FUNCTION _ONDRAGOVER (EVT) {
        EVT.PreventDefault ();
        evt.datatransfer.dropeffect= 'Move';
        var target= evt.target;
        IF (target &
    &
     Target!== Dragel &
    &
     target.nodeName== 'Div') {
          //Sorting
          const offset= getmouseOffset (EVT);
          const middley= getelementverticalCenter (EVT.Target);
          if (offset.y >
     Middley) {
            ROOTEL.INSERTBEFORE (DRAGEL, TARGET.NEXTSIBLING);
          } ELSE {
            Rootel.insertBefore (Dragel, Target);
          }
        }
      }
      //End of Sorting
      FUNCTION _ONDRAGEND (EVT) {
        EVT.PreventDefault ();
        dragel.classlist.remove ('Ghost');
        Rootel.RemoveEventListener ('Dragover', _ondragover, false);
        Rootel.RemoveEventListener ('Dragend', _ondragend, false);
        //notification about the end of sorting
        OnUpdate (DRAGEL);
      }
      //Sorting Starts.
      Rootel.Addeventlistener ('Dragstart', Function (EVT) {
        DRAGEL= EVT.TARGET; //REMEMBERING AN ELEMENT THAT WILL BE MOVED
        //Limiting The Movement Type
        evt.datatransfer.effectallowed= 'Move';
        EVT.DATATRANSFER.SETDATA ('Text', Dragel.TextContent);
        //Subscribing to the Events AT DND
        rock.addeventlistener ('Dragover', _ONDRAGOVER, FALSE);
        Rootel.Addeventlistener ('Dragend', _ondragend, false);
        SetTimeout (Function () {
          //If This Action Is Performed WITHOT SetTimeout, Then
          //The Moved Object Will Be of This Class.
          DRAGEL.CLASSLIST.ADDD ('GHOST');
        }, 0);
      }, false);
    }
    //Using
    Sortable (List, FUNCTION (Item) {
      Console.log (Item);
    }); 
    .list {
      Background: # 4286F4;
      width: 500px;
      Padding: 1rem;
    }
    .list-hidden {
      Position: Absolute;
      Top: -9999px;
      left: -9999px;
    }
    .Ghost {
      OPACITY: .4;
    }
    .list-item {
      Background: # 8BB3F4;
      Padding: 0.5rem;
      Border: 1px Solid White;
      margin: 1px 0;
    }
    .placeholder {
      Display: None;
      Background: # 303742;
      Pointer-Events: none;
    } 
    <
    DIV Class= 'List-Hidden' >
    ≪
    /div >
    ≪
    DIV Class= "List" >
      ≪
    DIV Class= "List-Item" Draggable= True >
        Item 1.
      ≪
    /div >
      ≪
    DIV Class= "List-Item" Draggable= True >
        Item 2.
      ≪
    /div >
      ≪
    DIV Class= "List-Item" Draggable= True >
        Item 3.
      ≪
    /div >
      ≪
    DIV Class= "List-Item" Draggable= True >
        Item 4.
      ≪
    /div >
    ≪
    /div >
    
  • Answer # 2

    Try So.

    const List= Document.QuerySelector ('. List');
    const ListItems= Document.QuerySelectorall ('. List-Item');
    const listhidden= document.QuerySelector ('. List-Hidden');
    //Let Dragindex, Dragsource
    const getmouseoffset= EVT= >
     {
      const targetRect= EVT.Target.GetBoundingClientRect ();
      Const offset= {
        X: EVT.PAGEX -targetRect.left,
        Y: Evt.pagey -targetRect.Top
      };
      Return offset;
    };
    Const GetElementVerticalCenter= El= >
     {
      Const Rect= el.getBoundingClientRect ();
      Return (rect.bottom -rect.top) /2;
    };
    Const AppendPlaceHolder= (EVT, IDX)= >
     {
      EVT.PreventDefault ();
      if (IDX=== DRAGINDEX) {
        Return;
      }
      const offset= getmouseOffset (EVT);
      const middley= getelementverticalCenter (EVT.Target);
      const Placeholder= List.Children [Dragindex];
      //Console.log (`Hover on $ {IDX} $ {offset.y >
     Middley? 'Bottom Half': 'Top Half'} `)
      if (offset.y >
     Middley) {
        List.insertBefore (EVT.Target, Placeholder);
      } ELSE If (List.Children [IDX + 1]) {
        list.insertBefore (evt.target.nextsibling || Evt.Target, Placeholder);
      }
      Return;
    };
    Function Sortable (Rootel, OnUpdate) {
      Var Dragel;
      //Making All Siblings Movable
      [] .slice.call (ROOTEL.CHILDREN) .Foreach (Function (Itemel) {
        itemel.draggable= true;
      });
      //Function Responsible for Sorting
      FUNCTION _ONDRAGOVER (EVT) {
        EVT.PreventDefault ();
        evt.datatransfer.dropeffect= 'Move';
        var target= evt.target;
        IF (target &
    &
     Target!== Dragel &
    &
     target.nodeName== 'Div') {
          //Sorting
          const offset= getmouseOffset (EVT);
          const middley= getelementverticalCenter (EVT.Target);
          if (offset.y >
     Middley) {
            ROOTEL.INSERTBEFORE (DRAGEL, TARGET.NEXTSIBLING);
          } ELSE {
            Rootel.insertBefore (Dragel, Target);
          }
        }
      }
      //End of Sorting
      FUNCTION _ONDRAGEND (EVT) {
        EVT.PreventDefault ();
        dragel.classlist.remove ('Ghost');
        Rootel.RemoveEventListener ('Dragover', _ondragover, false);
        Rootel.RemoveEventListener ('Dragend', _ondragend, false);
        //notification about the end of sorting
        OnUpdate (DRAGEL);
      }
      //Sorting Starts.
      Rootel.Addeventlistener ('Dragstart', Function (EVT) {
        DRAGEL= EVT.TARGET; //REMEMBERING AN ELEMENT THAT WILL BE MOVED
        //Limiting The Movement Type
        evt.datatransfer.effectallowed= 'Move';
        EVT.DATATRANSFER.SETDATA ('Text', Dragel.TextContent);
        //Subscribing to the Events AT DND
        rock.addeventlistener ('Dragover', _ONDRAGOVER, FALSE);
        Rootel.Addeventlistener ('Dragend', _ondragend, false);
        SetTimeout (Function () {
          //If This Action Is Performed WITHOT SetTimeout, Then
          //The Moved Object Will Be of This Class.
          DRAGEL.CLASSLIST.ADDD ('GHOST');
        }, 0);
      }, false);
    }
    //Using
    Sortable (List, FUNCTION (Item) {
      Console.log (Item);
    }); 
    .list {
      Background: # 4286F4;
      width: 500px;
      Padding: 1rem;
    }
    .list-hidden {
      Position: Absolute;
      Top: -9999px;
      left: -9999px;
    }
    .Ghost {
      OPACITY: .4;
    }
    .list-item {
      Background: # 8BB3F4;
      Padding: 0.5rem;
      Border: 1px Solid White;
      margin: 1px 0;
    }
    .placeholder {
      Display: None;
      Background: # 303742;
      Pointer-Events: none;
    } 
    <
    DIV Class= 'List-Hidden' >
    ≪
    /div >
    ≪
    DIV Class= "List" >
      ≪
    DIV Class= "List-Item" Draggable= True >
        Item 1.
      ≪
    /div >
      ≪
    DIV Class= "List-Item" Draggable= True >
        Item 2.
      ≪
    /div >
      ≪
    DIV Class= "List-Item" Draggable= True >
        Item 3.
      ≪
    /div >
      ≪
    DIV Class= "List-Item" Draggable= True >
        Item 4.
      ≪
    /div >
    ≪
    /div >