Click here to Skip to main content
15,499,155 members
Home / Discussions / JavaScript
   

JavaScript

 
QuestionJavascript cookies Pin
Member 158197443-Nov-22 21:46
MemberMember 158197443-Nov-22 21:46 
AnswerRe: Javascript cookies Pin
Jeremy Falcon17-Nov-22 14:32
professionalJeremy Falcon17-Nov-22 14:32 
Questionwhy javascript onchange not triggered for persian characters ? Pin
shaho zakaryaee23-Oct-22 22:47
Membershaho zakaryaee23-Oct-22 22:47 
AnswerRe: why javascript onchange not triggered for persian characters ? Pin
Richard Deeming23-Oct-22 22:49
mveRichard Deeming23-Oct-22 22:49 
AnswerRe: why javascript onchange not triggered for persian characters ? Pin
shaho zakaryaee23-Oct-22 22:58
Membershaho zakaryaee23-Oct-22 22:58 
GeneralRe: why javascript onchange not triggered for persian characters ? Pin
Jeremy Falcon26-Oct-22 12:10
professionalJeremy Falcon26-Oct-22 12:10 
QuestionDodger game with eventListener Pin
Ali Ibrahim jasim16-Oct-22 3:54
MemberAli Ibrahim jasim16-Oct-22 3:54 
AnswerRe: Dodger game with eventListener Pin
Jeremy Falcon26-Oct-22 12:26
professionalJeremy Falcon26-Oct-22 12:26 
QuestionHTML5 Nested drag and drop using vuejs2 Pin
Maseeha K1-Oct-22 0:40
MemberMaseeha K1-Oct-22 0:40 
Can anyone please help me. I have sidebar there are list of form fields. when I drag a field it will not fired outer drop event instead it fires the inner drop event.Inside the drop area I have added Drag and Drop Sortable List for sort the fields when the user drag the fiels.I have also added event propergation event handling but can't work. Here I attached the code
<template>
  <div>
    <v-card tile>
      <v-row>
        <v-col cols="2" class="pa-0">
          <div id="component-section">
            <v-expansion-panels focusable v-model="expandedPanel">
              <v-expansion-panel v-for="(item, propertyName, index) in listOfFields" :key="index">
                <v-expansion-panel-header style="background-color:grey;color:white">
                  <span> {{propertyName}} </span>
                </v-expansion-panel-header>
                <v-expansion-panel-content class="pa-0 drag-el" v-for="(item, Itemindex) in 
                      listOfFields[propertyName]" :key="Itemindex">
                  <v-chip outlined  draggable label small @dragstart="startDrag($event ,item)"
                    color="primary" class="ma-0 hover--class"  style="border-radius:0px">
                    {{item.text}}
                  </v-chip>
                </v-expansion-panel-content>
              </v-expansion-panel>
            </v-expansion-panels>
          </div>
        </v-col>
        <v-col cols="10">
          <div class="parent-div">
            <div class="drop-zone"
              <a href="https://www.codeproject.com/Members/drop">@drop</a>="onDrop($event, 1)" 
               @dragover.prevent @dragenter.prevent style="height:inherit;width:100%">
             <v-row  v-if="listOfAddedFields && listOfAddedFields.length" id='fieldDroppingArea' class="ma-2">
               <template v-for="(item, index) in listOfAddedFields">
                <v-col class="pa-1" :id="item.name"  cols="6" :key="index">
                  <template v-if="item.type === 1">
                    <v-text-field dense outlined hide-details :label="item.name"></v-text-field>
                 </template>
                  <template v-if="item.type === 2">
                    <v-textarea outlined :label="item.name" dense>
                    </v-textarea>
                  </template>
                </v-col>
              </template>
           </v-row>
          </div>
       </div>
     </v-col>
   </v-row>
  </v-card>
  <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
    <v-card>
      <v-toolbar dense dark color="primary">
        <v-btn icon fixed left="" <a href="https://www.codeproject.com/Members/cLick">@click</a>="dialog = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-toolbar>
    </v-card>
  </v-dialog>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  data() {
    return {
      dialog: false,
      dragging: false,
      showText: true,
      dropAreaHeight: 100,
      expandedPanel: 0,
      isDragging: false,
      listOfFields: {
        standard: [{
          text: 'Text field',
          value: 1,
          showText: true
        }, {
          text: 'Text area',
          value: 2,
          showText: true
        }, {
          text: 'Checkbox',
          value: 3,
          showText: true
        }, {
          text: 'Radio',
          value: 4,
          showText: true
        }, {
          text: 'Select',
          value: 5,
          showText: true
        }, {
          text: 'Date',
          value: 6,
          showText: true
        }, {
          text: 'Time',
          value: 7,
          showText: true
        }]
      },
      listOfAddedFields: [{
          type: 1,
          name: 'text1',
        },
        {
          type: 1,
          name: 'text2',
        },
        {
          type: 2,
          name: 'texarea1',
        },
        {
          type: 2,
          name: 'texarea2',
        },
        {
          type: 2,
          name: 'texarea3',
        }
      ],
      getChildrens: []
    }
  },
  mounted() {
    this.sortingList(document.getElementById('fieldDroppingArea'))
  },
  methods: {
    startDrag(event, item) {
      this.showText = false
      event.dataTransfer.dropEffect = 'move'
      event.dataTransfer.effectAllowed = 'move'
      event.dataTransfer.setData('itemID', item.value)
      this.dragging = true
    },
    onDrop(event) {
      console.log('mainDrop')
      const itemID = event.dataTransfer.getData('itemID')
      if (itemID) this.dialog = true
    },
    sortingList(target) {
      this.getChildrens = target.children
      let current = null
      if (this.getChildrens.length) {
        for (let i of this.getChildrens) {
          i.draggable = true
          i.addEventListener('dragstart', (ev) => {
            console.log(i)
            current = i
          })
          i.addEventListener('dragover', (evt) => {
            evt.preventDefault()
            evt.stopPropagation()
          })

          i.addEventListener('drop', (evt) => {
            console.log('innerDrop....')
            evt.preventDefault()
            evt.stopPropagation()
            let currentpos = 0
            let droppedpos = 0
            for (let it = 0; it < this.getChildrens.length; it++) {
              if (current == this.getChildrens[it]) {
                currentpos = it
                console.log(currentpos)
              }
              if (i == this.getChildrens[it]) {
                droppedpos = it
              }
            }
            if (currentpos < droppedpos) {
              i.parentNode.insertBefore(current, i.nextSibling);
            } else {
              i.parentNode.insertBefore(current, i);
            }
          }, true)
        }
      }
    },
  }
}
</script>
<style scoped>
  .hover--class {
    cursor: move;
  }
.parent-div {
    border:3px dashed skyblue;
    margin-top:10px;
    margin-right:10px;
    padding:10px;
    height:100%
  }
</style>


modified 1-Oct-22 5:47am.

AnswerRe: HTML5 Nested drag and drop using vuejs2 Pin
Jeremy Falcon26-Oct-22 12:12
professionalJeremy Falcon26-Oct-22 12:12 
Questiontrying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 5:22
MemberDSB Audio (David Sweeney-Bear)30-Sep-22 5:22 
AnswerRe: trying to get to grips with parsing from a JSON file Pin
Richard MacCutchan30-Sep-22 5:53
mveRichard MacCutchan30-Sep-22 5:53 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 6:42
MemberDSB Audio (David Sweeney-Bear)30-Sep-22 6:42 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
Richard MacCutchan30-Sep-22 6:49
mveRichard MacCutchan30-Sep-22 6:49 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 8:57
MemberDSB Audio (David Sweeney-Bear)30-Sep-22 8:57 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
Dom8615-Nov-22 5:33
MemberDom8615-Nov-22 5:33 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 6:35
MemberDSB Audio (David Sweeney-Bear)30-Sep-22 6:35 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
Richard MacCutchan30-Sep-22 6:50
mveRichard MacCutchan30-Sep-22 6:50 
AnswerRe: trying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 11:12
MemberDSB Audio (David Sweeney-Bear)30-Sep-22 11:12 
QuestionSecond chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Earl Lembertas27-Sep-22 11:35
MemberEarl Lembertas27-Sep-22 11:35 
AnswerRe: Second chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Pete O'Hanlon27-Sep-22 21:46
mvaPete O'Hanlon27-Sep-22 21:46 
GeneralRe: Second chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Earl Lembertas28-Sep-22 1:00
MemberEarl Lembertas28-Sep-22 1:00 
GeneralRe: Second chart not react to data entered, why? Explain, please, how to solve the issue? Pin
Pete O'Hanlon28-Sep-22 5:26
mvaPete O'Hanlon28-Sep-22 5:26 
QuestionWhy doesn't this script work as expected? Pin
DSB Audio (David Sweeney-Bear)24-Sep-22 4:39
MemberDSB Audio (David Sweeney-Bear)24-Sep-22 4:39 
AnswerRe: Why doesn't this script work as expected? Pin
DSB Audio (David Sweeney-Bear)24-Sep-22 8:43
MemberDSB Audio (David Sweeney-Bear)24-Sep-22 8:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.