How to detect-only the drop event with SortableJS

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• How to embed YouTube videos to the website without using iframes?

  I have embedded YouTube videos to the website using iframes. The website is fetching videos in real-time which mean whenever the user uploads a new video on YouTube, it is updated on the website too.

  Now there are two reasons I'm looking for iframes alternate.

  1. It makes the website slow. Every time the site is loaded, videos are fetched from YouTube and it is making the website slow.

  2. I'm learning SEO, and I read iframes hurt website SEO performance.

  So, what alternates do I have?
• Heroku buttons styling issue

  I made an app locally and pushed it on Heroku. The app is working perfectly on Heroku, however on the Homepage I have 2 buttons ( login and register ). When I run my app locally my buttons have some whitespace in between and they are rounded ( I am using tailwind for this). But on Heroku both buttons are not rounded and there is no whitespace in between them. When I inspect the button on Heroku, I see: class:".... rounded-full", which is what I expected and should have made the button rounded. Anyone has any idea what could cause this and how I can solve this ?

  This is how my index.js looks like:

  export default function Login() {
    return(
      <div>
        <Loginbuttons/>
      </div>
     )
  }
  

  and Loginbuttons.js defined as:

  import Link from 'next/link'
  
  export default function Loginbutton(props){
    return (
     <div>
     <div className = 'block'>
      <button
        style={{width:"10%", paddingTop:"15px",   paddingBottom:"15px"}}
        className='mt-10 mb-10 bg-blue-500 hover:bg-blue-700 text-wgvhite font-bold py-2 px-4 rounded-full'>
          <Link href='login' style={{textDecoration: 'none'}}>Login</Link>
      </button>
  
      <button
        style={{width:"10%", paddingTop:"15px", paddingBottom:"15px"}}
        className='mt-10 mb-10 ml-10 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full'>
          <Link href='register' style={{textDecoration: 'none'}}>Register</Link>
      </button>
    </div>
  </div>)}
  
• How do i connect to websocket URL from website?

  i'm trying to get the update values from website, i manage to connect but i cant get the values, i dont know if i'm doing anything wrong.

  this is what i'm trying to do, maybe this url is not complete, but i dont know how to get the full URL. when i try to conect i dont recieve anything, i read the coments i will try to send something to this websocket

  webSocket webSocket messages

  EDIT: this is the website: https://cachedownload.europacasino.com/live/desktop/bundles/22.4.1.4/?launch_alias=wwtbamrol_millrol&cat=Roulette%20&gameType=lobby&redirect_time=1651884988615&backUrl=https%3A%2F%2Fcachedownload.europacasino.com%2Flive%2Fdesktop%2F%3Flaunch_alias%3Dwwtbamrol_millrol%26cat%3DRoulette%2520#/

  you need click in this button to show the entry hall

  const WebSocket = require('ws')
  
  const ws = new WebSocket('wss://eurolive-frontend.playtechgaming.com/ws')
  ws.onmessage = (event) =>{
    
    console.log(event.data)
  }
  ws.onerror = (erro)=>{
    console.log(erro)
  }```
  
  
• How to show an attribute of an item (generated by a loop) on-click?

  In my vue3 app I have three boards :

  • one for draggable elements (already defined in a JSON file)
  • one for droppable elements (stored in a empty list in the vue)
  • one to display the properties of a dropped element, when you click on it

  I'm using Vuedraggable for the drag and drop and here's how it looks : IMG

  🎯My problem is on the third board : I want to click on an item in the "drop board" and show its properties into the "properties board" knowing that an item have multiple properties. I've tried for days and still can't find the solution, can somebody help me please?

  I'm new to Vue and StackOverflow, I've tried to be as clear as possible, sorry if I made mistakes.

  Home.vue - first of all, where I declare my boards :

  <template>
    <div>
        <Board v-for="(board, index) in boards" :key="index" :id="index" :board="board"/>
    </div>
  </div>
  </template>
  
  <script>
  import Board from "@/components/Board.vue";
  
  export default {
    components: {
      Board,
    },
    data: () => ({
      boards: [
        {
          title: "Toolbox Board",
        },
        {
          title: "Mockup Board",
        },
        { title: "Properties" },
      ],
    }),
  };
  

  Board.vue - The "drag board" code:

  <div class="dd-container" v-if="board.title == 'Toolbox Board'">
    <draggable v-model="dragItems" item-key="id":group="{ name: 'items', pull: 'clone', put: false }" :clone="cloneItems" @change="log">
      <template #item="{ element }">
        <div class="item">
          {{ element.title }}
        </div>
      </template>
    </draggable>
  </div>
  

  🚩Board.vue - The "drop board" code:

  <div class="dd-container" v-if="board.title == 'Mockup Board'">
    <draggable
      v-model="dropItems" item-key="id" group="items" @change="log">
      <template #item="{ element }">
        <div class="item">
          {{ element.title }}
        </div>
      </template>
    </draggable>
  </div>
  

  🚩 Board.vue - The "properties board":

  <div class="dd-container" v-if="board.title == 'Properties'">
      {{ property }} ??
  </div>
  

  🚩Board.vue - Some of the script :

  import dragItemsList from "/dragItems.json";
  import draggable from "vuedraggable";
  
  export default {
    components: {
      draggable,
    },
  
    data() {
      return {
        dragItems: dragItemsList,
        dropItems: [],
  

  🚩DragItems.json - Most importantly the JSON file :

  [
    {"title": "Simple list","id": 1,"properties": ["this is a property"],"fixed": true},
    {"title": "Search list","id": 2,"properties": ["this is a property"],"fixed": true},
    {"title": "Simple options","id": 3,"properties": ["this is a property"],"fixed": true},
    {"title": "Multiple options","id": 4,"properties": ["this is a property"],"fixed": true },
    {"title": "Location","id": 5,"properties": ["this is a property"],"fixed": true},
    {"title": "Picture","id": 6,"properties": ["this is a property"],"fixed": true},
    {"title": "Signature","id": 7,"properties": ["this is a property"],"fixed": true},
    {"title": "Audio","id": 8,"properties": ["this is a property"],"fixed": true},
    {"title": "Todo list","id": 9,"properties": ["this is a property"],"fixed": true},
    {"title": "Grouped items","id": 10, "properties": ["this is a property"],"fixed": true},
    {"title": "Divider","id": 11, "properties": ["this is a property"],"fixed": true},
    {"title": "Grouping container","id": 12, "properties": ["this is a property"],"fixed": true},
    {"title": "NFC reader","id": 13, "properties": ["this is a property"],"fixed": true},
    {"title": "QR code scanner","id": 14, "properties": ["this is a property"],"fixed": true},
    {"title": "Barcode scanner","id": 15, "properties": ["this is a property"],"fixed": true},
    {"title": "Fingerprint read (Idemia)","id": 16, "properties": [],"fixed": false}
  ]
  
• Sortable list height breaks when adding items to list. #SortableJS #Svlete

  I have 4 sortable container lists created with SortableJS for a Svelte application. 3 lists are in the same row and the final one is in the next row. I have created a list of items to load inside the list, which is sortable and can be dropped into other lists as well. When I add the items to the list the alignment of the lists is getting broken. When no items in the list, the height, and alignment of the list have no issues.

  Refer to the example code below,

      <script>
      import { onMount } from 'svelte'
      import Sortable from 'sortablejs'
  
      let container1, container2, container3, container4
  
      let containerList = [
          {
              name: 'container1',
              instance: container1,
          },
          {
              name: 'container2',
              instance: container2,
          },
          {
              name: 'container3',
              instance: container3,
          },
          {
              name: 'container4',
              instance: container4,
          },
      ]
  
      let itemsToLoad = [
          {
              id: 1,
              name: 'Item 1',
              container: 'container1',
          },
          {
              id: 2,
              name: 'Item 2',
              container: 'container1',
          },
          {
              id: 3,
              name: 'Item 3',
              container: 'container1',
          },
          {
              id: 4,
              name: 'Item 4',
              container: 'container2',
          },
      ]
  
      onMount(async function () {
          containerList.forEach((item) => {
              inItContainers(item.name, item.instance)
          })
      })
  
      const inItContainers = (containerName, containerInstance) => {
          Sortable.create(containerInstance, {
              group: {
                  name: containerName,
                  put: true,
              },
              animation: 200,
          })
      }
  </script>
  
  <div class="container">
      {#each containerList as itm}
          <section id={itm.name} bind:this={itm.instance}>
              {#each itemsToLoad as itmsload}
                  {#if itmsload.container == itm.name}
                      <div>{itmsload.name}</div>
                  {/if}
              {/each}
          </section>
      {/each}
  </div>
  
  <style lang="scss">
      .container > * {
          display: inline-flex;
      }
      section {
          margin-bottom: 16px;
          border: 1px solid black;
          padding: 10px;
          margin-left: 10px;
          width: 20%;
          border-color: #aabfd6;
      }
  
      .container #container4 {
          display: block;
          width: 71%;
      }
  </style>
  

  To Reproduce

  codesandbox:- https://codesandbox.io/s/affectionate-hill-u3458g

  I wanted to create sortable lists in the same row that should be fixed at the top if even the items are dropped into it. The height of the list can be adjusted according to the number of items added to it. How can I achieve this? Thanks in advance.
• How to add or remove elements on drop using sortable?

  I have two lists and I want to trigger actions when I drop elements from list 2 on list 1.

  I've not been able so far.

  1 element from List 1

  <li data-role="list-divider">
     <div class="row">
        <div class="col-md-6">
           <span>Holidays</span>
        </div>
        <div class="col-md-6">
           €2000
        </div>
     </div>
  </li>
  

  1 element from List 2

  <li data-role="list-divider">
     <div class="row">
        <div class="col-xl-6 col-lg-6">
           <div class="card l-bg-blue-dark">
              <div class="card-statistic-3 p-4">
                 <div class="card-icon card-icon-large"><i class="fas fa-laptop"></i></div>
                 <div class="mb-4">
                    <h5 class="card-title mb-0">Laptop</h5>
                 </div>
                 <div class="row align-items-center mb-2 d-flex">
                    <div class="col-8" id="test">
                       <h2 class="d-flex align-items-center mb-0">
                          €1500
                       </h2>
                    </div>
                 </div>
              </div>
           </div>
        </div>
     </div>
  </li>
  

  JS:

      let favoriteList = document.getElementById('favoriteList');
      let otherList = document.getElementById('otherList');
  
      let favorite_list = Sortable.create(favoriteList, {
          animation: 150,
          group: 'shared',
          ghostClass: 'sortable-ghost',
      });
  
      let other_list = Sortable.create(otherList, {
          animation: 150,
          group: 'shared',
          ghostClass: 'sortable-ghost',
          sort: false
      });
  
      $( "#favoriteList" ).sortable({
          receive: function( event, ui ) {
              alert("Sorted!!");
          }
      });
  

  I want to make element from list 2 equal to element in list 1. I understand I can achieve this by removing elements and changing classes (and therefore styles). However, I cannot trigger any action when dropping elements in list 1. It keeps triggering actions just when I move elements in list 1

  any suggestions?
• How do I solve this error"Uncaught Error: [News] is not a <Route> component. All component children of <Routes> must be a <Route>or <React.Fragment>"?

  I am trying to make a news app and this version 6 of react-router-dom is not working.. can anybody tell me how to fix it?

  import "./App.css";
  import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
  import React, { Component } from "react";
  import NavBar from "./components/NavBar";
  import News from "./components/News";
  export default class App extends Component {
    render() {
      return (
        <div>
          <Router>
            <NavBar />
            <Routes>
            <Route exact path="/"><News key="general" pageSize={this.pageSize} country="in" category="general"/></Route> 
            <Route exact path="/business"><News key="business" pageSize={this.pageSize} country="in" category="business"/></Route> 
            <Route exact path="/entertainment"><News key="entertainment" pageSize={this.pageSize} country="in" category="entertainment"/></Route> 
            <Route exact path="/general"><News key="general" pageSize={this.pageSize} country="in" category="general"/></Route> 
            <Route exact path="/health"><News key="health" pageSize={this.pageSize} country="in" category="health"/></Route> 
            <Route exact path="/science"><News key="science" pageSize={this.pageSize} country="in" category="science"/></Route> 
            <Route exact path="/sports"><News key="sports" pageSize={this.pageSize} country="in" category="sports"/></Route> 
            <Route exact path="/technology"><News key="technology" pageSize={this.pageSize} country="in" category="technology"/></Route> 
            </Routes>
          </Router>
        </div>
      );
    }
  }

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
• How to select a value from the populated list using document query selector in browser console?

  I am trying to automate my application using a JavaScript function. Below is a screenshot of the what the dropdown looks like in the application and I would like to select one of the option using the document.querySelector() method.

  

  I need some help on that. A CSS selector for the option is also shared below.

  document.querySelector("body > app-root > app-qc-route > app-qc > div > app-workspace-outlet > app-workspace-split-layout > ap-split-pane > div:nth-child(1) > app-workspace-outlet > app-workspace-vertical-layout > app-workspace-outlet:nth-child(1) > app-workspace-split-layout > ap-split-pane > div:nth-child(2) > app-workspace-outlet > app-workspace-tabs-panel > ap-tab-view > ap-tab-content:nth-child(4) > app-qc-marker-tab > div > ap-scroll-area > app-marker-form > div > ap-json-forms").shadowRoot.querySelector("ap-dispatch-renderer > ap-layout-renderer").shadowRoot.querySelector("div > div:nth-child(1) > ap-dispatch-renderer > ap-autocomplete-control-renderer").shadowRoot.querySelector("#\\\\\\#\\\\\\/properties\\\\\\/name").shadowRoot.querySelector("#option-0")
  
• CSS pseudoclass usage

  I want to combine a:link and a:visited at once. What is best method?

  I am thinking of a:link+visited. This doesn't work though! What to do then? What is the right way?